@jbrowse/plugin-linear-genome-view 2.8.0 → 2.10.0

package/dist/BaseLinearDisplay/components/Tooltip.js

@@ -1,35 +1,15 @@
 "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;
+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 react_1 = __importDefault(require("react"));
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const react_popper_1 = require("react-popper");
+const react_2 = require("@floating-ui/react");
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
@@ -52,39 +32,27 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ message }, ref) {
     return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
 });
-const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {
+const Tooltip = (0, mobx_react_1.observer)(function ({ model, clientMouseCoord, }) {
     var _a, _b;
     const { theme, classes } = useStyles();
     const { featureUnderMouse } = model;
-    const [width, setWidth] = (0, react_1.useState)(0);
-    const [popperElt, setPopperElt] = (0, react_1.useState)(null);
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = (0, react_1.useMemo)(() => ({
-        getBoundingClientRect: () => {
-            const x = clientMouseCoord[0] + width / 2 + 20;
-            const y = clientMouseCoord[1];
-            return {
-                top: y,
-                left: x,
-                bottom: y,
-                right: x,
-                width: 0,
-                height: 0,
-                x,
-                y,
-                toJSON() { },
-            };
-        },
-    }), [clientMouseCoord, width]);
-    const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, popperElt);
+    const x = clientMouseCoord[0] + 15;
+    const y = clientMouseCoord[1];
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        placement: 'right',
+    });
+    const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
     const contents = featureUnderMouse
         ? (0, configuration_1.getConf)(model, 'mouseover', { feature: featureUnderMouse })
         : undefined;
     const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return featureUnderMouse && contents ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        react_1.default.createElement("div", { ref: setPopperElt, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
-            react_1.default.createElement(TooltipContents, { ref: elt => setWidth((elt === null || elt === void 0 ? void 0 : elt.getBoundingClientRect().width) || 0), message: contents })))) : null;
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
+            react_1.default.createElement(TooltipContents, { message: contents })))) : null;
 });
 exports.default = Tooltip;

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.d.ts

@@ -69,11 +69,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, Feature>; /**
-             * #getter
-             * a CompositeMap of `featureId -> feature obj` that
-             * just looks in all the block data for that feature
-             */
+            features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
@@ -132,9 +128,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: Function | undefined;
-        blockState?: Record<string, any> | undefined; /**
-         * #property
-         */
+        blockState?: Record<string, any> | undefined;
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
@@ -142,9 +136,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string; /**
-             * #getter
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -361,11 +353,7 @@ export declare const BaseLinearDisplay: import("mobx-state-tree").IModelType<{
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            features: Map<string, Feature>; /**
-             * #getter
-             * a CompositeMap of `featureId -> feature obj` that
-             * just looks in all the block data for that feature
-             */
+            features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -44,7 +44,14 @@ const FeatureDensityMixin_1 = __importDefault(require("./FeatureDensityMixin"));
 /**
  * #stateModel BaseLinearDisplay
  * #category display
- * extends `BaseDisplay`
+ *
+ * BaseLinearDisplay is used as the basis for many linear genome view tracks.
+ * It is block based, and can use 'static blocks' or 'dynamic blocks'
+ *
+ * extends
+ * - [BaseDisplay](../basedisplay)
+ * - [TrackHeightMixin](../trackheightmixin)
+ * - [FeatureDensityMixin](../featuredensitymixin)
  */
 function stateModelFactory() {
     return mobx_state_tree_1.types

package/dist/BasicTrack/configSchema.d.ts

@@ -58,6 +58,11 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
             defaultValue: number;
             description: string;
         };
+        maxDepth: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     formatAbout: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         config: {

package/dist/FeatureTrack/configSchema.d.ts

@@ -58,6 +58,11 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
             defaultValue: number;
             description: string;
         };
+        maxDepth: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     formatAbout: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         config: {

package/dist/LaunchLinearGenomeView/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
+const searchUtils_1 = require("..//searchUtils");
 exports.default = (pluginManager) => {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
     // @ts-expect-error
@@ -16,21 +17,9 @@ exports.default = (pluginManager) => {
             if (!asm) {
                 throw new Error(`Assembly "${assembly}" not found when launching linear genome view`);
             }
-            await view.navToLocString(loc, assembly);
+            await (0, searchUtils_1.handleSelectedRegion)({ input: loc, model: view, assembly: asm });
             const idsNotFound = [];
-            tracks.forEach(track => {
-                try {
-                    view.showTrack(track);
-                }
-                catch (e) {
-                    if (`${e}`.match('Could not resolve identifier')) {
-                        idsNotFound.push(track);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            });
+            tracks.forEach(track => tryTrack(view, track, idsNotFound));
             if (idsNotFound.length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
@@ -41,3 +30,16 @@ exports.default = (pluginManager) => {
         }
     });
 };
+function tryTrack(model, trackId, idsNotFound) {
+    try {
+        model.showTrack(trackId);
+    }
+    catch (e) {
+        if (`${e}`.match('Could not resolve identifier')) {
+            idsNotFound.push(trackId);
+        }
+        else {
+            throw e;
+        }
+    }
+}

package/dist/LinearBareDisplay/model.d.ts

@@ -3,7 +3,8 @@ import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 /**
  * #stateModel LinearBareDisplay
  * #category display
- * extends `BaseLinearDisplay`
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -76,9 +77,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #getter
-         */
+        };
         mouseover: {
             type: string;
             description: string;
@@ -98,9 +97,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 }, {
     rendererTypeName: string;
     error: unknown;
-    message: string | undefined; /**
-     * #property
-     */
+    message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
         model: {
@@ -160,7 +157,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly height: number;
 } & {
-    setScrollTop(scrollTop: number): void;
+    setScrollTop(scrollTop: number): void; /**
+     * #method
+     */
     setHeight(displayHeight: number): number;
     resizeHeight(distance: number): number;
 } & {
@@ -303,9 +302,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #getter
-         */
+        };
         mouseover: {
             type: string;
             description: string;

package/dist/LinearBareDisplay/model.js

@@ -8,7 +8,8 @@ const BaseLinearDisplay_1 = require("../BaseLinearDisplay");
 /**
  * #stateModel LinearBareDisplay
  * #category display
- * extends `BaseLinearDisplay`
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types

package/dist/LinearBasicDisplay/model.d.ts

@@ -7,6 +7,9 @@ import { Instance } from 'mobx-state-tree';
  * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
+ *
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -34,7 +37,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined;
+        renderInProgress: AbortController | undefined; /**
+         * #property
+         */
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -52,9 +57,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #method
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             features: Map<string, import("@jbrowse/core/util").Feature>;
@@ -81,15 +84,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #property
-         */
+        };
         mouseover: {
             type: string;
             description: string;
-            defaultValue: string; /**
-             * #property
-             */
+            defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
@@ -127,9 +126,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         model: {
             id: string;
             type: string;
-            rpcDriverName: string | undefined; /**
-             * #property
-             */
+            rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
@@ -160,13 +157,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
-            rendererTypeName: string; /**
-             * #action
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
+    /**
+     * #action
+     */
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
@@ -195,10 +193,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
-    readonly maxFeatureScreenDensity: any;
-    readonly featureDensityStatsReady: boolean; /**
+    /**
      * #getter
      */
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
 } & {
     afterAttach(): void;
@@ -219,9 +218,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
 } & {
-    readonly blockType: "dynamicBlocks" | "staticBlocks"; /**
-     * #getter
-     */
+    readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -278,7 +275,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: unknown): any; /**
+         * #property
+         */
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     /**
@@ -305,7 +304,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         config: {
             [x: string]: any;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: unknown): any;
+            setSubschema(slotName: string, data: unknown): any; /**
+             * #property
+             */
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
     };
     /**
@@ -340,7 +341,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined;
+        renderInProgress: AbortController | undefined; /**
+         * #property
+         */
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -358,9 +361,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         afterAttach(): void;
         setStatus(message: string): void;
         setLoading(abortController: AbortController): void;
-        setMessage(messageText: string): void; /**
-         * #method
-         */
+        setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             features: Map<string, import("@jbrowse/core/util").Feature>;
@@ -387,15 +388,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: string;
             defaultValue: number;
             description: string;
-        }; /**
-         * #property
-         */
+        };
         mouseover: {
             type: string;
             description: string;
-            defaultValue: string; /**
-             * #property
-             */
+            defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;

package/dist/LinearBasicDisplay/model.js

@@ -40,6 +40,9 @@ const SetMaxHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __i
  * #category display
  * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
  * etc.
+ *
+ * extends
+ * - [BaseLinearDisplay](../baselineardisplay)
  */
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types

package/dist/LinearGenomeView/components/CenterLine.js

@@ -30,7 +30,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     centerLineContainer: {
         background: 'transparent',
         height: '100%',
-        zIndex: 5,
+        zIndex: 5, // above the track but under menu
         position: 'absolute',
         border: `1px ${theme.palette.action.active} dashed`,
         borderTop: 'none',

package/dist/LinearGenomeView/components/Cytobands.d.ts

@@ -53,11 +53,17 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         load(): Promise<void>;
         loadPre(): Promise<void>;
     } & {
-        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getAdapterMapEntry(adapterConf: {
+            [x: string]: unknown;
+        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
+        getRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
-        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getReverseRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
     } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -109,11 +115,17 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         load(): Promise<void>;
         loadPre(): Promise<void>;
     } & {
-        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getAdapterMapEntry(adapterConf: {
+            [x: string]: unknown;
+        }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
+        getRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
-        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+        getReverseRefNameMapForAdapter(adapterConf: {
+            [x: string]: unknown;
+        }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
             [x: string]: string | undefined;
         }>;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;

package/dist/LinearGenomeView/components/Cytobands.js

@@ -71,10 +71,16 @@ const Cytobands = (0, mobx_react_1.observer)(function ({ overview, block, assemb
         const c = colorMap[type];
         if (type === 'acen' && !centromereSeen) {
             centromereSeen = true; // the next acen entry is drawn with different right triangle
-            return react_1.default.createElement("polygon", { key: k, points: leftTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? rightTriangle(s - w, 0, w, h)
+                : leftTriangle(s, 0, w, h);
+            return react_1.default.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (type === 'acen' && centromereSeen) {
-            return react_1.default.createElement("polygon", { key: k, points: rightTriangle(s, 0, w, h), fill: c });
+            const tri = reversed
+                ? leftTriangle(s - w, 0, w, h)
+                : rightTriangle(s, 0, w, h);
+            return react_1.default.createElement("polygon", { key: k, points: tri, fill: c });
         }
         else if (lcap === index) {
             return react_1.default.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });