@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/dist/LinearReadCloudDisplay/model.d.ts

@@ -13,7 +13,7 @@ interface Filter {
 }
 /**
  * #stateModel LinearReadCloudDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not BaseLinearDisplay
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -21,70 +21,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
     heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
-        key: import("mobx-state-tree").ISimpleType<string>;
-        region: import("mobx-state-tree").IModelType<{
-            refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        } & {
-            assemblyName: import("mobx-state-tree").ISimpleType<string>;
-        }, {
-            setRefName(newRefName: string): void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
-        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    }, {
-        renderInProgress: AbortController | undefined;
-        filled: boolean;
-        reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        features: Map<string, import("@jbrowse/core/util").Feature> | undefined; /**
-         * #action
-         */
-        layout: any;
-        status: string;
-        error: unknown;
-        message: string | undefined;
-        maxHeightReached: boolean;
-        ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
-        renderProps: any;
-    } & {
-        doReload(): void;
-        afterAttach(): void; /**
-         * #action
-         */
-        setStatus(message: string): void;
-        setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void;
-        setRendered(props: {
-            reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, import("@jbrowse/core/util").Feature>;
-            layout: any;
-            maxHeightReached: boolean;
-            renderProps: any;
-        } | undefined): void;
-        setError(error: unknown): void;
-        reload(): void;
-        beforeDestroy(): void;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+} & {
     userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 } & {
-    /**
-     * #property
-     */
     type: import("mobx-state-tree").ISimpleType<"LinearReadCloudDisplay">;
-    /**
-     * #property
-     */
-    configuration: import("mobx-state-tree").ITypeUnion<any, any, any>;
-    /**
-     * #property
-     */
+    configuration: AnyConfigurationSchemaType;
     filterBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
         flagInclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
         flagExclude: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -94,17 +36,16 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             value: import("mobx-state-tree").ISimpleType<string>;
         }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
-    /**
-     * #property
-     */
     colorBy: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
         type: import("mobx-state-tree").ISimpleType<string>;
         tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         extra: import("mobx-state-tree").IType<any, any, any>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     rendererTypeName: string;
     error: unknown;
+    message: string | undefined;
 } & {
     readonly RenderingComponent: React.FC<{
         model: {
@@ -114,6 +55,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
@@ -121,6 +63,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         }, {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: Function | undefined;
         blockState?: Record<string, any> | undefined;
@@ -133,13 +76,19 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
+            type: import("mobx-state-tree").ISimpleType<string>; /**
+             * #action
+             * internal, a reference to a HTMLCanvas because we use a autorun to draw
+             * the canvas
+             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
@@ -149,100 +98,66 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly DisplayMessageComponent: React.FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-    regionCannotBeRendered(): undefined;
+    regionCannotBeRendered(): null;
 } & {
+    setMessage(arg?: string | undefined): void;
     setError(error?: unknown): void;
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
 } & {
-    currBpPerPx: number;
     scrollTop: number;
-    message: string;
-    featureIdUnderMouse: string | undefined;
-    contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
-    estimatedRegionsStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
-    estimatedRegionsStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
 } & {
     readonly height: number;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
-    readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
-    readonly renderDelay: number;
-    readonly TooltipComponent: React.FC<any>;
-    readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: React.FC<any> | undefined;
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
+    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
+    featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+    currStatsBpPerPx: number;
 } & {
-    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
-    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
-    getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
-    readonly estimatedStatsReady: boolean;
+    readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
-} & {
-    setMessage(message: string): void;
 } & {
     afterAttach(): void;
-    estimateRegionsStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats>;
-    setRegionsStatsP(arg: any): void;
-    setRegionsStats(estimatedRegionsStats?: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined): void;
-    clearRegionsStats(): void;
-    setHeight(displayHeight: number): number;
-    resizeHeight(distance: number): number;
-    setScrollTop(scrollTop: number): void;
-    updateStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined): void;
-    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
-    setCurrBpPerPx(n: number): void;
-    deleteBlock(key: string): void;
-    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
-    clearFeatureSelection(): void;
-    setFeatureIdUnderMouse(feature: string | undefined): void;
-    reload(): void;
-    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
+} & {
+    setCurrStatsBpPerPx(n: number): void;
+    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void; /**
+     * #property
+     */
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    clearFeatureDensityStats(): void;
 } & {
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;
-} & {
-    reload(): Promise<void>;
-} & {
-    afterAttach(): void;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): JSX.Element | null;
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    renderProps(): any;
-} & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions & {
-        overrideHeight: number;
-        theme: import("@mui/material").ThemeOptions;
-    }): Promise<JSX.Element>;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): React.JSX.Element | null;
 } & {
     loading: boolean;
-    drawn: boolean;
     chainData: ChainData | undefined;
+    lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number;
     ref: HTMLCanvasElement | null;
-    lastDrawnOffsetPx: number;
 } & {
     /**
      * #action
-     * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
      */
-    reload(): void;
+    setDrawSingletons(f: boolean): void;
     /**
      * #action
      */
-    setRef(ref: HTMLCanvasElement | null): void;
-    setColorScheme(s: {
-        type: string;
-    }): void;
+    setLastDrawnOffsetPx(n: number): void;
     /**
      * #action
      */
-    setChainData(args: ChainData): void;
+    setLastDrawnBpPerPx(n: number): void;
     /**
      * #action
      */
@@ -250,31 +165,46 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     /**
      * #action
      */
-    setDrawn(f: boolean): void;
+    reload(): void;
     /**
      * #action
+     * internal, a reference to a HTMLCanvas because we use a autorun to draw
+     * the canvas
      */
-    setFilterBy(filter: Filter): void;
+    setRef(ref: HTMLCanvasElement | null): void;
+    setColorScheme(s: {
+        type: string;
+    }): void;
     /**
      * #action
      */
-    setLastDrawnOffsetPx(n: number): void;
-} & {
+    setChainData(args: ChainData): void;
     /**
-     * #getter
+     * #action
      */
-    readonly ready: boolean;
-    readonly rendererTypeName: string;
+    setFilterBy(filter: Filter): void;
+} & {
+    readonly drawn: boolean;
+} & {
     renderProps(): any;
     /**
      * #method
      */
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        type: string;
+        checked: boolean;
+        onClick: () => void;
+        icon?: undefined;
+        subMenu?: undefined;
+    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
         subMenu?: undefined;
     } | {
         label: string;
@@ -285,6 +215,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             label: string;
             onClick: () => void;
         }[];
+        type?: undefined;
+        checked?: undefined;
         onClick?: undefined;
     })[];
     /**
@@ -292,73 +224,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      */
     renderSvg(opts: {
         rasterizeLayers?: boolean;
-    }): Promise<JSX.Element | undefined>;
+    }): Promise<React.ReactNode>;
 } & {
     afterAttach(): void;
-}, {
-    type: string;
-} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    type: import("mobx-state-tree").ISimpleType<string>;
-    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-} & {
-    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
-        key: import("mobx-state-tree").ISimpleType<string>;
-        region: import("mobx-state-tree").IModelType<{
-            refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        } & {
-            assemblyName: import("mobx-state-tree").ISimpleType<string>;
-        }, {
-            setRefName(newRefName: string): void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
-        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    }, {
-        renderInProgress: AbortController | undefined;
-        filled: boolean;
-        reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
-        layout: any;
-        status: string;
-        error: unknown;
-        message: string | undefined;
-        maxHeightReached: boolean;
-        ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
-        renderProps: any;
-    } & {
-        doReload(): void;
-        afterAttach(): void;
-        setStatus(message: string): void;
-        setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void;
-        setRendered(props: {
-            reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, import("@jbrowse/core/util").Feature>;
-            layout: any;
-            maxHeightReached: boolean;
-            renderProps: any;
-        } | undefined): void;
-        setError(error: unknown): void;
-        reload(): void;
-        beforeDestroy(): void;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
-    type: string;
-    id: string;
-    rpcDriverName: string | undefined;
-    heightPreConfig: number | undefined;
-    userBpPerPxLimit: number | undefined;
-    userByteSizeLimit: number | undefined;
-} & import("mobx-state-tree")._NotCustomized>;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearReadCloudDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearReadCloudDisplayModel = Instance<LinearReadCloudDisplayStateModel>;
 export default stateModelFactory;

package/dist/LinearReadCloudDisplay/model.js

@@ -26,9 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const mobx_1 = require("mobx");
+const react_1 = require("react");
 const mobx_state_tree_1 = require("mobx-state-tree");
+const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
@@ -37,22 +37,15 @@ const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
 const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
 // locals
 const shared_1 = require("../shared");
-const fetchChains_1 = require("../shared/fetchChains");
-const drawFeats_1 = __importDefault(require("./drawFeats"));
 // async
 const FilterByTagDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/FilterByTag'))));
-// stabilize clipid under test for snapshot
-function getId(id) {
-    const isJest = typeof jest === 'undefined';
-    return `cloud-clip-${isJest ? id : 'jest'}`;
-}
 /**
  * #stateModel LinearReadCloudDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not BaseLinearDisplay
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
-        .compose('LinearReadCloudDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
+        .compose('LinearReadCloudDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), mobx_state_tree_1.types.model({
         /**
          * #property
          */
@@ -73,36 +66,36 @@ function stateModelFactory(configSchema) {
             tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
             extra: mobx_state_tree_1.types.frozen(),
         })),
+        /**
+         * #property
+         */
+        drawSingletons: true,
     }))
         .volatile(() => ({
         loading: false,
-        drawn: false,
         chainData: undefined,
+        lastDrawnOffsetPx: undefined,
+        lastDrawnBpPerPx: 0,
         ref: null,
-        lastDrawnOffsetPx: 0,
     }))
         .actions(self => ({
         /**
          * #action
-         * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
          */
-        reload() {
-            self.error = undefined;
+        setDrawSingletons(f) {
+            self.drawSingletons = f;
         },
         /**
          * #action
          */
-        setRef(ref) {
-            self.ref = ref;
-        },
-        setColorScheme(s) {
-            self.colorBy = (0, mobx_state_tree_1.cast)(s);
+        setLastDrawnOffsetPx(n) {
+            self.lastDrawnOffsetPx = n;
         },
         /**
          * #action
          */
-        setChainData(args) {
-            self.chainData = args;
+        setLastDrawnBpPerPx(n) {
+            self.lastDrawnBpPerPx = n;
         },
         /**
          * #action
@@ -113,44 +106,47 @@ function stateModelFactory(configSchema) {
         /**
          * #action
          */
-        setDrawn(f) {
-            self.drawn = f;
+        reload() {
+            self.error = undefined;
         },
         /**
          * #action
+         * internal, a reference to a HTMLCanvas because we use a autorun to draw
+         * the canvas
          */
-        setFilterBy(filter) {
-            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        setRef(ref) {
+            self.ref = ref;
+        },
+        setColorScheme(s) {
+            self.colorBy = (0, mobx_state_tree_1.cast)(s);
         },
         /**
          * #action
          */
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
+        setChainData(args) {
+            self.chainData = args;
+        },
+        /**
+         * #action
+         */
+        setFilterBy(filter) {
+            self.filterBy = (0, mobx_state_tree_1.cast)(filter);
+        },
+    }))
+        .views(self => ({
+        get drawn() {
+            return self.lastDrawnOffsetPx !== undefined;
         },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
-            /**
-             * #getter
-             */
-            get ready() {
-                return !!self.chainData;
-            },
-            // we don't use a server side renderer, but we need to provide this
-            // to avoid confusing the system currently
-            get rendererTypeName() {
-                return 'PileupRenderer';
-            },
             // we don't use a server side renderer, so this fills in minimal
             // info so as not to crash
             renderProps() {
                 return {
                     ...superRenderProps(),
-                    // never ready, we don't want to use server side render
-                    notReady: true,
-                    config: (0, configuration_1.ConfigurationSchema)('empty', {}).create(),
+                    notReady: !self.chainData,
                 };
             },
             /**
@@ -159,6 +155,12 @@ function stateModelFactory(configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
+                    {
+                        label: 'Draw singletons',
+                        type: 'checkbox',
+                        checked: self.drawSingletons,
+                        onClick: () => self.setDrawSingletons(!self.drawSingletons),
+                    },
                     {
                         label: 'Filter by',
                         icon: ClearAll_1.default,
@@ -197,66 +199,27 @@ function stateModelFactory(configSchema) {
              * #method
              */
             async renderSvg(opts) {
-                const view = (0, util_1.getContainingView)(self);
-                const width = view.dynamicBlocks.totalWidthPx;
-                const height = self.height;
-                let str;
-                if (opts.rasterizeLayers) {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = width * 2;
-                    canvas.height = height * 2;
-                    const ctx = canvas.getContext('2d');
-                    if (!ctx) {
-                        return;
-                    }
-                    ctx.scale(2, 2);
-                    await (0, drawFeats_1.default)(self, ctx);
-                    str = (react_1.default.createElement("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
-                }
-                else {
-                    // @ts-ignore
-                    const C2S = await Promise.resolve().then(() => __importStar(require('canvas2svg')));
-                    const ctx = new C2S.default(width, height);
-                    await (0, drawFeats_1.default)(self, ctx);
-                    const clipid = getId(self.id);
-                    str = (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("defs", null,
-                            react_1.default.createElement("clipPath", { id: clipid },
-                                react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-                        react_1.default.createElement("g", { 
-                            /* eslint-disable-next-line react/no-danger */
-                            dangerouslySetInnerHTML: {
-                                __html: ctx.getSvg().innerHTML,
-                            }, clipPath: `url(#${clipid})` })));
-                }
-                return react_1.default.createElement("g", null, str);
+                const { renderSvg } = await Promise.resolve().then(() => __importStar(require('../shared/renderSvg')));
+                const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
+                return renderSvg(self, opts, drawFeats);
             },
         };
     })
         .actions(self => ({
         afterAttach() {
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => (0, fetchChains_1.fetchChains)(self), { delay: 1000 }));
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(async () => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;
+            (async () => {
                 try {
-                    const canvas = self.ref;
-                    if (!canvas) {
-                        return;
-                    }
-                    const ctx = canvas.getContext('2d');
-                    if (!ctx) {
-                        return;
-                    }
-                    ctx.clearRect(0, 0, canvas.width, self.height * 2);
-                    ctx.resetTransform();
-                    ctx.scale(2, 2);
-                    await (0, drawFeats_1.default)(self, ctx);
-                    self.setDrawn(true);
+                    const { doAfterAttach } = await Promise.resolve().then(() => __importStar(require('../shared/afterAttach')));
+                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
+                    doAfterAttach(self, drawFeats);
                 }
                 catch (e) {
                     console.error(e);
                     self.setError(e);
                 }
-            }, { delay: 1000 }));
+            })();
         },
     }));
 }