@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/ChordVariantDisplay/components/ChordVariantDisplay.d.ts

@@ -0,0 +1,11 @@
+declare const ChordVariantDisplay: ({ display, }: {
+    display: {
+        filled: boolean;
+        error: unknown;
+        reactElement: React.ReactElement;
+        renderProps: {
+            radius: number;
+        };
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChordVariantDisplay;

package/esm/ChordVariantDisplay/components/ChordVariantDisplay.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import DisplayError from "./DisplayError.js";
+import Loading from "./Loading.js";
+const ChordVariantDisplay = observer(function ChordVariantDisplay({ display, }) {
+    if (display.error) {
+        return _jsx(DisplayError, { model: display });
+    }
+    else if (!display.filled) {
+        return _jsx(Loading, { model: display });
+    }
+    else {
+        return display.reactElement;
+    }
+});
+export default ChordVariantDisplay;

package/esm/ChordVariantDisplay/components/DisplayError.d.ts

@@ -0,0 +1,9 @@
+declare const DisplayError: ({ model, }: {
+    model: {
+        renderProps: {
+            radius: number;
+        };
+        error: unknown;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default DisplayError;

package/esm/ChordVariantDisplay/components/DisplayError.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+const DisplayError = observer(function DisplayError({ model, }) {
+    const { renderProps: { radius }, error, } = model;
+    return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: _jsx("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 } }) }) }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "#ffb4b4" }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), _jsx("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: String(error) })] }));
+});
+export default DisplayError;

package/esm/ChordVariantDisplay/components/Loading.d.ts

@@ -0,0 +1,8 @@
+declare const Loading: ({ model: { renderProps: { radius }, }, }: {
+    model: {
+        renderProps: {
+            radius: number;
+        };
+    };
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Loading;

package/esm/ChordVariantDisplay/components/Loading.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(() => {
+    const duration = 1.4;
+    return {
+        path: {
+            strokeDasharray: 187,
+            strokeDashoffset: 50,
+            animation: `$dash ${duration}s ease-in-out infinite, $colors ${duration * 4}s ease-in-out infinite`,
+        },
+    };
+});
+const Loading = observer(function Loading({ model: { renderProps: { radius }, }, }) {
+    const { classes } = useStyles();
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setShown(true);
+        }, 400);
+        return () => {
+            clearTimeout(timeout);
+        };
+    });
+    return !shown ? null : (_jsxs("g", { children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonalHatch", width: "10", height: "10", patternTransform: "rotate(45 0 0)", patternUnits: "userSpaceOnUse", children: _jsx("line", { x1: "0", y1: "0", x2: "0", y2: "10", style: { stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 } }) }) }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "#f1f1f1" }), _jsx("circle", { cx: "0", cy: "0", r: radius, fill: "url(#diagonalHatch)" }), _jsx("text", { x: "0", y: "0", transform: "rotate(90 0 0)", dominantBaseline: "middle", textAnchor: "middle", children: "Loading\u2026" }), _jsx("circle", { className: classes.path, fill: "none", strokeWidth: "4", strokeLinecap: "round", cx: "0", cy: "0", r: "60" })] }));
+});
+export default Loading;

package/esm/ChordVariantDisplay/index.js

@@ -1,7 +1,7 @@
+import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import { BaseChordDisplayComponent } from '@jbrowse/plugin-circular-view';
-import configSchemaF from './models/configSchema';
-import stateModelF from './models/stateModelFactory';
+import configSchemaF from "./models/configSchema.js";
+import stateModelF from "./models/stateModelFactory.js";
 export default function ChordVariantDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
@@ -13,7 +13,7 @@ export default function ChordVariantDisplayF(pluginManager) {
             stateModel,
             trackType: 'VariantTrack',
             viewType: 'CircularView',
-            ReactComponent: BaseChordDisplayComponent,
+            ReactComponent: lazy(() => import("./components/ChordVariantDisplay.js")),
         });
     });
 }

package/esm/ChordVariantDisplay/models/configSchema.d.ts

@@ -1,12 +1,11 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare function stateModelFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IAnyModelType, [undefined]>;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare function configSchemaF(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     onChordClick: {
         type: string;
         description: string;
         defaultValue: boolean;
         contextVariable: string[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
-export default stateModelFactory;
+    renderer: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IAnyModelType, [undefined]>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+export default configSchemaF;

package/esm/ChordVariantDisplay/models/configSchema.js

@@ -1,13 +1,18 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { baseChordDisplayConfig } from '@jbrowse/plugin-circular-view';
-import { types } from 'mobx-state-tree';
+import { types } from '@jbrowse/mobx-state-tree';
 function x() { }
-function stateModelFactory(pluginManager) {
+function configSchemaF(pluginManager) {
     return ConfigurationSchema('ChordVariantDisplay', {
+        onChordClick: {
+            type: 'boolean',
+            description: 'callback that should be run when a chord in the track is clicked',
+            defaultValue: false,
+            contextVariable: ['feature', 'track', 'pluginManager'],
+        },
         renderer: types.optional(pluginManager.pluggableConfigSchemaType('renderer'), { type: 'StructuralVariantChordRenderer' }),
     }, {
-        baseConfiguration: baseChordDisplayConfig,
+        explicitIdentifier: 'displayId',
         explicitlyTyped: true,
     });
 }
-export default stateModelFactory;
+export default configSchemaF;

package/esm/ChordVariantDisplay/models/renderReaction.d.ts

@@ -0,0 +1,30 @@
+import type { StopToken } from '@jbrowse/core/util/stopToken';
+export declare function renderReactionData(self: any): {
+    rendererType: any;
+    rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
+    renderProps: any;
+    renderingProps: Record<string, unknown> | undefined;
+    renderArgs: {
+        assemblyName: string;
+        adapterConfig: any;
+        rendererType: any;
+        regions: import("@jbrowse/core/util").Region[] & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>>;
+        blockDefinitions: any;
+        sessionId: string;
+        trackInstanceId: string;
+        timeout: number;
+    };
+};
+export declare function renderReactionEffect(props?: any, stopToken?: StopToken): Promise<{
+    message: any;
+    html?: undefined;
+    data?: undefined;
+    reactElement?: undefined;
+    renderingComponent?: undefined;
+} | {
+    html: any;
+    data: any;
+    reactElement: any;
+    renderingComponent: any;
+    message?: undefined;
+}>;

package/esm/ChordVariantDisplay/models/renderReaction.js

@@ -0,0 +1,48 @@
+import { getContainingTrack, getContainingView, getSession, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+export function renderReactionData(self) {
+    const view = getContainingView(self);
+    const { rendererType } = self;
+    const { rpcManager } = getSession(view);
+    return {
+        rendererType,
+        rpcManager,
+        renderProps: self.renderProps(),
+        renderingProps: self.renderingProps?.(),
+        renderArgs: {
+            assemblyName: view.displayedRegions[0].assemblyName,
+            adapterConfig: structuredClone(self.adapterConfig),
+            rendererType: rendererType.name,
+            regions: structuredClone(view.displayedRegions),
+            blockDefinitions: self.blockDefinitions,
+            sessionId: getRpcSessionId(self),
+            trackInstanceId: getContainingTrack(self).id,
+            timeout: 1000000,
+        },
+    };
+}
+export async function renderReactionEffect(props, stopToken) {
+    if (!props) {
+        throw new Error('cannot render with no props');
+    }
+    const { rendererType, rpcManager, cannotBeRenderedReason, renderArgs, renderProps, renderingProps, exportSVG, } = props;
+    if (cannotBeRenderedReason) {
+        return { message: cannotBeRenderedReason };
+    }
+    if (!renderProps.radius || !renderArgs.regions?.length) {
+        return { message: 'Skipping render' };
+    }
+    const { html, ...data } = await rendererType.renderInClient(rpcManager, {
+        ...renderArgs,
+        ...renderProps,
+        renderingProps,
+        exportSVG,
+        stopToken,
+    });
+    return {
+        html,
+        data,
+        reactElement: data.reactElement,
+        renderingComponent: rendererType.ReactComponent,
+    };
+}

package/esm/ChordVariantDisplay/models/renderSvg.d.ts

@@ -0,0 +1,6 @@
+import { renderReactionData } from './renderReaction.ts';
+import type { ExportSvgOptions } from '@jbrowse/plugin-circular-view';
+import type { ThemeOptions } from '@mui/material';
+export declare function renderSvg(self: Parameters<typeof renderReactionData>[0], opts: ExportSvgOptions & {
+    theme?: ThemeOptions;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/ChordVariantDisplay/models/renderSvg.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactRendering } from '@jbrowse/core/util';
+import { renderReactionData, renderReactionEffect } from "./renderReaction.js";
+export async function renderSvg(self, opts) {
+    const data = renderReactionData(self);
+    const rendering = await renderReactionEffect({
+        ...data,
+        exportSVG: opts,
+        theme: opts.theme || data.renderProps.theme,
+    });
+    return _jsx(ReactRendering, { rendering: rendering });
+}