@jbrowse/plugin-hic 2.10.3 → 2.11.1

package/dist/HicAdapter/HicAdapter.js

@@ -8,17 +8,16 @@ const BaseAdapter_1 = require("@jbrowse/core/data_adapters/BaseAdapter");
 const rxjs_1 = require("@jbrowse/core/util/rxjs");
 const io_1 = require("@jbrowse/core/util/io");
 const hic_straw_1 = __importDefault(require("hic-straw"));
-// wraps generic-filehandle so the read function only takes a position and length
-// in some ways, generic-filehandle wishes it was just this but it has
+// wraps generic-filehandle so the read function only takes a position and
+// length in some ways, generic-filehandle wishes it was just this but it has
 // to adapt to the node.js fs promises API
 class GenericFilehandleWrapper {
     constructor(filehandle) {
         this.filehandle = filehandle;
     }
     async read(position, length) {
-        const { buffer: b, bytesRead } = await this.filehandle.read(Buffer.allocUnsafe(length), 0, length, position);
-        // xref https://stackoverflow.com/a/31394257/2129219
-        return b.buffer.slice(b.byteOffset, b.byteOffset + bytesRead);
+        const { buffer } = await this.filehandle.read(Buffer.alloc(length), 0, length, position);
+        return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
     }
 }
 function openFilehandleWrapper(location, pluginManager) {
@@ -67,9 +66,9 @@ class HicAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
             const res = await this.getResolution(bpPerPx / (resolution || 1000), opts);
             statusCallback('Downloading .hic data');
             const records = await this.hic.getContactRecords('KR', { start, chr, end }, { start, chr, end }, 'BP', res);
-            records.forEach(record => {
+            for (const record of records) {
                 observer.next(record);
-            });
+            }
             statusCallback('');
             observer.complete();
         }, opts.signal); // eslint-disable-line @typescript-eslint/no-explicit-any

package/dist/HicAdapter/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicAdapterF(pluginManager: PluginManager): void;

package/dist/HicAdapter/index.js

@@ -28,11 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
-exports.default = (pluginManager) => {
+function HicAdapterF(pluginManager) {
     pluginManager.addAdapterType(() => new pluggableElementTypes_1.AdapterType({
         name: 'HicAdapter',
         displayName: 'Hi-C adapter',
         configSchema: configSchema_1.default,
         getAdapterClass: () => Promise.resolve().then(() => __importStar(require('./HicAdapter'))).then(r => r.default),
     }));
-};
+}
+exports.default = HicAdapterF;

package/dist/HicRenderer/HicRenderer.js

@@ -10,20 +10,25 @@ const operators_1 = require("rxjs/operators");
 const configuration_1 = require("@jbrowse/core/configuration");
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
 const colord_1 = require("@jbrowse/core/util/colord");
+const rxjs_1 = require("rxjs");
+const d3_scale_1 = require("d3-scale");
+const d3_scale_chromatic_1 = require("d3-scale-chromatic");
+const d3_interpolate_1 = require("d3-interpolate");
 class HicRenderer extends ServerSideRendererType_1.default {
     constructor() {
         super(...arguments);
         this.supportsSVG = true;
     }
     async makeImageData(ctx, props) {
-        const { features, config, bpPerPx, signal, resolution, sessionId, adapterConfig, regions, } = props;
+        const { features, config, bpPerPx, signal, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, } = props;
         const [region] = regions;
         const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig);
         const res = await dataAdapter.getResolution(bpPerPx / resolution);
+        const width = (region.end - region.start) / bpPerPx;
         const w = res / (bpPerPx * Math.sqrt(2));
         const baseColor = (0, colord_1.colord)((0, configuration_1.readConfObject)(config, 'baseColor'));
+        const offset = Math.floor(region.start / res);
         if (features.length) {
-            const offset = features[0].bin1;
             let maxScore = 0;
             let minBin = 0;
             let maxBin = 0;
@@ -34,14 +39,34 @@ class HicRenderer extends ServerSideRendererType_1.default {
                 maxBin = Math.max(Math.max(bin1, bin2), maxBin);
             }
             await (0, util_1.abortBreakPoint)(signal);
-            function horizontallyFlip() {
+            const colorSchemes = {
+                juicebox: ['rgba(0,0,0,0)', 'red'],
+                fall: (0, d3_interpolate_1.interpolateRgbBasis)([
+                    'rgb(255, 255, 255)',
+                    'rgb(255, 255, 204)',
+                    'rgb(255, 237, 160)',
+                    'rgb(254, 217, 118)',
+                    'rgb(254, 178, 76)',
+                    'rgb(253, 141, 60)',
+                    'rgb(252, 78, 42)',
+                    'rgb(227, 26, 28)',
+                    'rgb(189, 0, 38)',
+                    'rgb(128, 0, 38)',
+                    'rgb(0, 0, 0)',
+                ]),
+                viridis: d3_scale_chromatic_1.interpolateViridis,
+            };
+            const m = useLogScale ? maxScore : maxScore / 20;
+            // @ts-expect-error
+            const x1 = colorSchemes[colorScheme] || colorSchemes.juicebox;
+            const scale = useLogScale
+                ? (0, d3_scale_1.scaleSequentialLog)(x1).domain([1, m])
+                : (0, d3_scale_1.scaleSequential)(x1).domain([0, m]);
+            ctx.save();
+            if (region.reversed === true) {
                 ctx.scale(-1, 1);
-                const width = (region.end - region.start) / bpPerPx;
                 ctx.translate(-width, 0);
             }
-            if (region.reversed === true) {
-                horizontallyFlip();
-            }
             ctx.rotate(-Math.PI / 4);
             let start = Date.now();
             for (const { bin1, bin2, counts } of features) {
@@ -49,6 +74,8 @@ class HicRenderer extends ServerSideRendererType_1.default {
                     count: counts,
                     maxScore,
                     baseColor,
+                    scale,
+                    useLogScale,
                 });
                 ctx.fillRect((bin1 - offset) * w, (bin2 - offset) * w, w, w);
                 if (+Date.now() - start > 400) {
@@ -56,6 +83,7 @@ class HicRenderer extends ServerSideRendererType_1.default {
                     start = +Date.now();
                 }
             }
+            ctx.restore();
         }
     }
     async render(renderProps) {
@@ -86,10 +114,9 @@ class HicRenderer extends ServerSideRendererType_1.default {
     async getFeatures(args) {
         const { regions, sessionId, adapterConfig } = args;
         const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig);
-        const features = await dataAdapter
+        const features = await (0, rxjs_1.firstValueFrom)(dataAdapter
             .getFeatures(regions[0], args)
-            .pipe((0, operators_1.toArray)())
-            .toPromise();
+            .pipe((0, operators_1.toArray)()));
         // cast to any to avoid return-type conflict, because the
         // types of features returned by our getFeatures are quite
         // different from the base interface

package/dist/HicRenderer/configSchema.js

@@ -21,8 +21,8 @@ const HicRenderer = (0, configuration_1.ConfigurationSchema)('HicRenderer', {
     color: {
         type: 'color',
         description: 'the color of each feature in a hic alignment',
-        defaultValue: `jexl:colorString(hsl(alpha(baseColor,min(1,count/(maxScore/20)))))`,
-        contextVariable: ['count', 'maxScore', 'baseColor'],
+        defaultValue: `jexl:interpolate(count,scale)`,
+        contextVariable: ['count', 'maxScore', 'baseColor', 'scale'],
     },
     /**
      * #slot

package/dist/HicRenderer/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicRendererF(pluginManager: PluginManager): void;

package/dist/HicRenderer/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const HicRendering_1 = __importDefault(require("./components/HicRendering"));
 const configSchema_1 = __importDefault(require("./configSchema"));
 const HicRenderer_1 = __importDefault(require("./HicRenderer"));
-exports.default = (pluginManager) => {
+function HicRendererF(pluginManager) {
     pluginManager.addRendererType(() => new HicRenderer_1.default({
         name: 'HicRenderer',
         ReactComponent: HicRendering_1.default,
         configSchema: configSchema_1.default,
         pluginManager,
     }));
-};
+}
+exports.default = HicRendererF;

package/dist/HicTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicTrackF(pluginManager: PluginManager): void;

package/dist/HicTrack/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const TrackType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/TrackType"));
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const configSchema_1 = __importDefault(require("./configSchema"));
-exports.default = (pluginManager) => {
+function HicTrackF(pluginManager) {
     pluginManager.addTrackType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);
         return new TrackType_1.default({
@@ -16,4 +16,5 @@ exports.default = (pluginManager) => {
             stateModel: (0, models_1.createBaseTrackModel)(pluginManager, 'HicTrack', configSchema),
         });
     });
-};
+}
+exports.default = HicTrackF;

package/dist/LinearHicDisplay/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearHicDisplayF(pluginManager: PluginManager): void;

package/dist/LinearHicDisplay/index.js

@@ -7,7 +7,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const configSchema_1 = __importDefault(require("./configSchema"));
 const model_1 = __importDefault(require("./model"));
-exports.default = (pluginManager) => {
+function LinearHicDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = (0, configSchema_1.default)(pluginManager);
         return new pluggableElementTypes_1.DisplayType({
@@ -20,4 +20,5 @@ exports.default = (pluginManager) => {
             ReactComponent: plugin_linear_genome_view_1.BaseLinearDisplayComponent,
         });
     });
-};
+}
+exports.default = LinearHicDisplayF;

package/dist/LinearHicDisplay/model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mobx-state-tree").IModelType<{
+export default function stateModelFactory(configSchema: AnyConfigurationSchemaType): 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>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -67,6 +67,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         maxFeatureScreenDensity: {
             type: string;
             description: string;
+            /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -80,39 +83,40 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
-    /**
-     * #property
-     */
     type: import("mobx-state-tree").ISimpleType<"LinearHicDisplay">;
-    /**
-     * #property
-     */
     configuration: AnyConfigurationSchemaType;
-    /**
-     * #property
-     */
     resolution: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    useLogScale: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    colorScheme: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
     rendererTypeName: string;
     error: unknown;
-    message: string | undefined;
+    message: string | undefined; /**
+     * #property
+     */
 } & {
     readonly RenderingComponent: import("react").FC<{
         model: {
             id: string;
             type: string;
-            rpcDriverName: string | undefined;
+            rpcDriverName: string | undefined; /**
+             * #property
+             */
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
+            message: string | undefined; /**
+             * #property
+             */
         } & 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>;
@@ -170,7 +174,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
     currStatsBpPerPx: number;
 } & {
-    readonly currentBytesRequested: number;
+    readonly currentBytesRequested: number; /**
+     * #method
+     */
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
@@ -241,11 +247,34 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
      * #action
      */
     setResolution(n: number): void;
+    /**
+     * #action
+     */
+    setUseLogScale(f: boolean): void;
+    /**
+     * #action
+     */
+    setColorScheme(f?: string): void;
 } & {
     /**
      * #getter
      */
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    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;
+        subMenu?: undefined;
+    } | {
+        label: string;
+        type: string;
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+        checked?: undefined;
+        onClick?: undefined;
+    })[];
 }, {
     type: string;
 } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
@@ -315,6 +344,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         maxFeatureScreenDensity: {
             type: string;
             description: string;
+            /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -328,7 +360,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
@@ -343,4 +377,3 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     userBpPerPxLimit: number | undefined;
     userByteSizeLimit: number | undefined;
 } & import("mobx-state-tree")._NotCustomized>;
-export default _default;

package/dist/LinearHicDisplay/model.js

@@ -9,86 +9,141 @@ const mobx_state_tree_1 = require("mobx-state-tree");
  * extends `BaseLinearDisplay`
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
-exports.default = (configSchema) => mobx_state_tree_1.types
-    .compose('LinearHicDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
-    /**
-     * #property
-     */
-    type: mobx_state_tree_1.types.literal('LinearHicDisplay'),
-    /**
-     * #property
-     */
-    configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-    /**
-     * #property
-     */
-    resolution: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 1),
-}))
-    .views(self => {
-    const { renderProps: superRenderProps } = self;
-    return {
+function stateModelFactory(configSchema) {
+    return mobx_state_tree_1.types
+        .compose('LinearHicDisplay', plugin_linear_genome_view_1.BaseLinearDisplay, mobx_state_tree_1.types.model({
         /**
-         * #getter
+         * #property
          */
-        get blockType() {
-            return 'dynamicBlocks';
-        },
+        type: mobx_state_tree_1.types.literal('LinearHicDisplay'),
+        /**
+         * #property
+         */
+        configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        /**
+         * #property
+         */
+        resolution: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 1),
+        /**
+         * #property
+         */
+        useLogScale: false,
         /**
-         * #getter
+         * #property
          */
-        get rendererTypeName() {
-            return 'HicRenderer';
+        colorScheme: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
+    }))
+        .views(self => {
+        const { renderProps: superRenderProps } = self;
+        return {
+            /**
+             * #getter
+             */
+            get blockType() {
+                return 'dynamicBlocks';
+            },
+            /**
+             * #getter
+             */
+            get rendererTypeName() {
+                return 'HicRenderer';
+            },
+            /**
+             * #method
+             */
+            renderProps() {
+                const config = self.rendererType.configSchema.create({
+                    ...(0, configuration_1.getConf)(self, 'renderer'),
+                    // add specific jexl color callback when using pre-defined color schemes
+                    ...(self.colorScheme
+                        ? { color: 'jexl:interpolate(count,scale)' }
+                        : {}),
+                }, (0, mobx_state_tree_1.getEnv)(self));
+                return {
+                    ...superRenderProps(),
+                    config,
+                    rpcDriverName: self.rpcDriverName,
+                    displayModel: self,
+                    resolution: self.resolution,
+                    useLogScale: self.useLogScale,
+                    colorScheme: self.colorScheme,
+                };
+            },
+        };
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setResolution(n) {
+            self.resolution = n;
         },
         /**
-         * #method
+         * #action
          */
-        renderProps() {
-            const config = self.rendererType.configSchema.create((0, configuration_1.getConf)(self, 'renderer') || {}, (0, mobx_state_tree_1.getEnv)(self));
-            return {
-                ...superRenderProps(),
-                config,
-                rpcDriverName: self.rpcDriverName,
-                displayModel: self,
-                resolution: self.resolution,
-            };
+        setUseLogScale(f) {
+            self.useLogScale = f;
         },
-    };
-})
-    .actions(self => ({
-    /**
-     * #action
-     */
-    setResolution(n) {
-        self.resolution = n;
-    },
-}))
-    .views(self => {
-    const { trackMenuItems: superTrackMenuItems } = self;
-    return {
         /**
-         * #getter
+         * #action
          */
-        trackMenuItems() {
-            return [
-                ...superTrackMenuItems(),
-                {
-                    label: 'Resolution',
-                    subMenu: [
-                        {
-                            label: 'Finer resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution * 2);
+        setColorScheme(f) {
+            self.colorScheme = f;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
+            /**
+             * #getter
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Use log scale',
+                        type: 'checkbox',
+                        checked: self.useLogScale,
+                        onClick: () => self.setUseLogScale(!self.useLogScale),
+                    },
+                    {
+                        label: 'Color scheme',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Fall',
+                                onClick: () => self.setColorScheme('fall'),
                             },
-                        },
-                        {
-                            label: 'Coarser resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution / 2);
+                            {
+                                label: 'Viridis',
+                                onClick: () => self.setColorScheme('viridis'),
                             },
-                        },
-                    ],
-                },
-            ];
-        },
-    };
-});
+                            {
+                                label: 'Juicebox',
+                                onClick: () => self.setColorScheme('juicebox'),
+                            },
+                            {
+                                label: 'Clear',
+                                onClick: () => self.setColorScheme(undefined),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Resolution',
+                        subMenu: [
+                            {
+                                label: 'Finer resolution',
+                                onClick: () => self.setResolution(self.resolution * 2),
+                            },
+                            {
+                                label: 'Coarser resolution',
+                                onClick: () => self.setResolution(self.resolution / 2),
+                            },
+                        ],
+                    },
+                ];
+            },
+        };
+    });
+}
+exports.default = stateModelFactory;

package/dist/index.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const colord_1 = require("@jbrowse/core/util/colord");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+// locals
 const HicRenderer_1 = __importDefault(require("./HicRenderer"));
 const HicTrack_1 = __importDefault(require("./HicTrack"));
 const LinearHicDisplay_1 = __importDefault(require("./LinearHicDisplay"));
 const HicAdapter_1 = __importDefault(require("./HicAdapter"));
-const tracks_1 = require("@jbrowse/core/util/tracks");
 class HicPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -35,16 +36,15 @@ class HicPlugin extends Plugin_1.default {
                 else if (adapterHint === adapterName) {
                     return obj;
                 }
-                return adapterGuesser(file, index, adapterHint);
+                else {
+                    return adapterGuesser(file, index, adapterHint);
+                }
             };
         });
         pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
-            return (adapterName) => {
-                if (adapterName === 'HicAdapter') {
-                    return 'HicTrack';
-                }
-                return trackTypeGuesser(adapterName);
-            };
+            return (adapterName) => adapterName === 'HicAdapter'
+                ? 'HicTrack'
+                : trackTypeGuesser(adapterName);
         });
     }
     configure(pluginManager) {
@@ -52,6 +52,7 @@ class HicPlugin extends Plugin_1.default {
         jexl.addFunction('alpha', (color, n) => color.alpha(n));
         jexl.addFunction('hsl', (color) => (0, colord_1.colord)(color.toHsl()));
         jexl.addFunction('colorString', (color) => color.toHex());
+        jexl.addFunction('interpolate', (count, scale) => scale(count));
     }
 }
 exports.default = HicPlugin;

package/esm/HicAdapter/HicAdapter.js

@@ -2,17 +2,16 @@ import { BaseFeatureDataAdapter, } from '@jbrowse/core/data_adapters/BaseAdapter
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { openLocation } from '@jbrowse/core/util/io';
 import HicStraw from 'hic-straw';
-// wraps generic-filehandle so the read function only takes a position and length
-// in some ways, generic-filehandle wishes it was just this but it has
+// wraps generic-filehandle so the read function only takes a position and
+// length in some ways, generic-filehandle wishes it was just this but it has
 // to adapt to the node.js fs promises API
 class GenericFilehandleWrapper {
     constructor(filehandle) {
         this.filehandle = filehandle;
     }
     async read(position, length) {
-        const { buffer: b, bytesRead } = await this.filehandle.read(Buffer.allocUnsafe(length), 0, length, position);
-        // xref https://stackoverflow.com/a/31394257/2129219
-        return b.buffer.slice(b.byteOffset, b.byteOffset + bytesRead);
+        const { buffer } = await this.filehandle.read(Buffer.alloc(length), 0, length, position);
+        return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
     }
 }
 export function openFilehandleWrapper(location, pluginManager) {
@@ -60,9 +59,9 @@ export default class HicAdapter extends BaseFeatureDataAdapter {
             const res = await this.getResolution(bpPerPx / (resolution || 1000), opts);
             statusCallback('Downloading .hic data');
             const records = await this.hic.getContactRecords('KR', { start, chr, end }, { start, chr, end }, 'BP', res);
-            records.forEach(record => {
+            for (const record of records) {
                 observer.next(record);
-            });
+            }
             statusCallback('');
             observer.complete();
         }, opts.signal); // eslint-disable-line @typescript-eslint/no-explicit-any

package/esm/HicAdapter/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicAdapterF(pluginManager: PluginManager): void;

package/esm/HicAdapter/index.js

@@ -1,10 +1,10 @@
 import { AdapterType } from '@jbrowse/core/pluggableElementTypes';
 import configSchema from './configSchema';
-export default (pluginManager) => {
+export default function HicAdapterF(pluginManager) {
     pluginManager.addAdapterType(() => new AdapterType({
         name: 'HicAdapter',
         displayName: 'Hi-C adapter',
         configSchema,
         getAdapterClass: () => import('./HicAdapter').then(r => r.default),
     }));
-};
+}

package/esm/HicRenderer/HicRenderer.js

@@ -5,20 +5,25 @@ import { toArray } from 'rxjs/operators';
 import { readConfObject } from '@jbrowse/core/configuration';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { colord } from '@jbrowse/core/util/colord';
+import { firstValueFrom } from 'rxjs';
+import { scaleSequential, scaleSequentialLog } from 'd3-scale';
+import { interpolateViridis } from 'd3-scale-chromatic';
+import { interpolateRgbBasis } from 'd3-interpolate';
 export default class HicRenderer extends ServerSideRendererType {
     constructor() {
         super(...arguments);
         this.supportsSVG = true;
     }
     async makeImageData(ctx, props) {
-        const { features, config, bpPerPx, signal, resolution, sessionId, adapterConfig, regions, } = props;
+        const { features, config, bpPerPx, signal, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, } = props;
         const [region] = regions;
         const { dataAdapter } = await getAdapter(this.pluginManager, sessionId, adapterConfig);
         const res = await dataAdapter.getResolution(bpPerPx / resolution);
+        const width = (region.end - region.start) / bpPerPx;
         const w = res / (bpPerPx * Math.sqrt(2));
         const baseColor = colord(readConfObject(config, 'baseColor'));
+        const offset = Math.floor(region.start / res);
         if (features.length) {
-            const offset = features[0].bin1;
             let maxScore = 0;
             let minBin = 0;
             let maxBin = 0;
@@ -29,14 +34,34 @@ export default class HicRenderer extends ServerSideRendererType {
                 maxBin = Math.max(Math.max(bin1, bin2), maxBin);
             }
             await abortBreakPoint(signal);
-            function horizontallyFlip() {
+            const colorSchemes = {
+                juicebox: ['rgba(0,0,0,0)', 'red'],
+                fall: interpolateRgbBasis([
+                    'rgb(255, 255, 255)',
+                    'rgb(255, 255, 204)',
+                    'rgb(255, 237, 160)',
+                    'rgb(254, 217, 118)',
+                    'rgb(254, 178, 76)',
+                    'rgb(253, 141, 60)',
+                    'rgb(252, 78, 42)',
+                    'rgb(227, 26, 28)',
+                    'rgb(189, 0, 38)',
+                    'rgb(128, 0, 38)',
+                    'rgb(0, 0, 0)',
+                ]),
+                viridis: interpolateViridis,
+            };
+            const m = useLogScale ? maxScore : maxScore / 20;
+            // @ts-expect-error
+            const x1 = colorSchemes[colorScheme] || colorSchemes.juicebox;
+            const scale = useLogScale
+                ? scaleSequentialLog(x1).domain([1, m])
+                : scaleSequential(x1).domain([0, m]);
+            ctx.save();
+            if (region.reversed === true) {
                 ctx.scale(-1, 1);
-                const width = (region.end - region.start) / bpPerPx;
                 ctx.translate(-width, 0);
             }
-            if (region.reversed === true) {
-                horizontallyFlip();
-            }
             ctx.rotate(-Math.PI / 4);
             let start = Date.now();
             for (const { bin1, bin2, counts } of features) {
@@ -44,6 +69,8 @@ export default class HicRenderer extends ServerSideRendererType {
                     count: counts,
                     maxScore,
                     baseColor,
+                    scale,
+                    useLogScale,
                 });
                 ctx.fillRect((bin1 - offset) * w, (bin2 - offset) * w, w, w);
                 if (+Date.now() - start > 400) {
@@ -51,6 +78,7 @@ export default class HicRenderer extends ServerSideRendererType {
                     start = +Date.now();
                 }
             }
+            ctx.restore();
         }
     }
     async render(renderProps) {
@@ -81,10 +109,9 @@ export default class HicRenderer extends ServerSideRendererType {
     async getFeatures(args) {
         const { regions, sessionId, adapterConfig } = args;
         const { dataAdapter } = await getAdapter(this.pluginManager, sessionId, adapterConfig);
-        const features = await dataAdapter
+        const features = await firstValueFrom(dataAdapter
             .getFeatures(regions[0], args)
-            .pipe(toArray())
-            .toPromise();
+            .pipe(toArray()));
         // cast to any to avoid return-type conflict, because the
         // types of features returned by our getFeatures are quite
         // different from the base interface

package/esm/HicRenderer/configSchema.js

@@ -19,8 +19,8 @@ const HicRenderer = ConfigurationSchema('HicRenderer', {
     color: {
         type: 'color',
         description: 'the color of each feature in a hic alignment',
-        defaultValue: `jexl:colorString(hsl(alpha(baseColor,min(1,count/(maxScore/20)))))`,
-        contextVariable: ['count', 'maxScore', 'baseColor'],
+        defaultValue: `jexl:interpolate(count,scale)`,
+        contextVariable: ['count', 'maxScore', 'baseColor', 'scale'],
     },
     /**
      * #slot

package/esm/HicRenderer/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicRendererF(pluginManager: PluginManager): void;

package/esm/HicRenderer/index.js

@@ -1,11 +1,11 @@
 import ReactComponent from './components/HicRendering';
 import configSchema from './configSchema';
 import HicRenderer from './HicRenderer';
-export default (pluginManager) => {
+export default function HicRendererF(pluginManager) {
     pluginManager.addRendererType(() => new HicRenderer({
         name: 'HicRenderer',
         ReactComponent,
         configSchema,
         pluginManager,
     }));
-};
+}

package/esm/HicTrack/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function HicTrackF(pluginManager: PluginManager): void;

package/esm/HicTrack/index.js

@@ -1,7 +1,7 @@
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
 import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import configSchemaF from './configSchema';
-export default (pluginManager) => {
+export default function HicTrackF(pluginManager) {
     pluginManager.addTrackType(() => {
         const configSchema = configSchemaF(pluginManager);
         return new TrackType({
@@ -11,4 +11,4 @@ export default (pluginManager) => {
             stateModel: createBaseTrackModel(pluginManager, 'HicTrack', configSchema),
         });
     });
-};
+}

package/esm/LinearHicDisplay/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearHicDisplayF(pluginManager: PluginManager): void;

package/esm/LinearHicDisplay/index.js

@@ -2,7 +2,7 @@ import { DisplayType } from '@jbrowse/core/pluggableElementTypes';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import configSchemaFactory from './configSchema';
 import stateModelFactory from './model';
-export default (pluginManager) => {
+export default function LinearHicDisplayF(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);
         return new DisplayType({
@@ -15,4 +15,4 @@ export default (pluginManager) => {
             ReactComponent: BaseLinearDisplayComponent,
         });
     });
-};
+}

package/esm/LinearHicDisplay/model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mobx-state-tree").IModelType<{
+export default function stateModelFactory(configSchema: AnyConfigurationSchemaType): 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>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -67,6 +67,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         maxFeatureScreenDensity: {
             type: string;
             description: string;
+            /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -80,39 +83,40 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
-    /**
-     * #property
-     */
     type: import("mobx-state-tree").ISimpleType<"LinearHicDisplay">;
-    /**
-     * #property
-     */
     configuration: AnyConfigurationSchemaType;
-    /**
-     * #property
-     */
     resolution: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    useLogScale: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    colorScheme: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 }, {
     rendererTypeName: string;
     error: unknown;
-    message: string | undefined;
+    message: string | undefined; /**
+     * #property
+     */
 } & {
     readonly RenderingComponent: import("react").FC<{
         model: {
             id: string;
             type: string;
-            rpcDriverName: string | undefined;
+            rpcDriverName: string | undefined; /**
+             * #property
+             */
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
+            message: string | undefined; /**
+             * #property
+             */
         } & 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>;
@@ -170,7 +174,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
     currStatsBpPerPx: number;
 } & {
-    readonly currentBytesRequested: number;
+    readonly currentBytesRequested: number; /**
+     * #method
+     */
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
@@ -241,11 +247,34 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
      * #action
      */
     setResolution(n: number): void;
+    /**
+     * #action
+     */
+    setUseLogScale(f: boolean): void;
+    /**
+     * #action
+     */
+    setColorScheme(f?: string): void;
 } & {
     /**
      * #getter
      */
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    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;
+        subMenu?: undefined;
+    } | {
+        label: string;
+        type: string;
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+        checked?: undefined;
+        onClick?: undefined;
+    })[];
 }, {
     type: string;
 } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
@@ -315,6 +344,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         maxFeatureScreenDensity: {
             type: string;
             description: string;
+            /**
+             * #property
+             */
             defaultValue: number;
         };
         fetchSizeLimit: {
@@ -328,7 +360,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             description: string;
         };
         mouseover: {
-            type: string;
+            type: string; /**
+             * #getter
+             */
             description: string;
             defaultValue: string;
             contextVariable: string[];
@@ -343,4 +377,3 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     userBpPerPxLimit: number | undefined;
     userByteSizeLimit: number | undefined;
 } & import("mobx-state-tree")._NotCustomized>;
-export default _default;

package/esm/LinearHicDisplay/model.js

@@ -7,86 +7,140 @@ import { types, getEnv } from 'mobx-state-tree';
  * extends `BaseLinearDisplay`
  */
 function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
-export default (configSchema) => types
-    .compose('LinearHicDisplay', BaseLinearDisplay, types.model({
-    /**
-     * #property
-     */
-    type: types.literal('LinearHicDisplay'),
-    /**
-     * #property
-     */
-    configuration: ConfigurationReference(configSchema),
-    /**
-     * #property
-     */
-    resolution: types.optional(types.number, 1),
-}))
-    .views(self => {
-    const { renderProps: superRenderProps } = self;
-    return {
+export default function stateModelFactory(configSchema) {
+    return types
+        .compose('LinearHicDisplay', BaseLinearDisplay, types.model({
         /**
-         * #getter
+         * #property
          */
-        get blockType() {
-            return 'dynamicBlocks';
-        },
+        type: types.literal('LinearHicDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        resolution: types.optional(types.number, 1),
+        /**
+         * #property
+         */
+        useLogScale: false,
         /**
-         * #getter
+         * #property
          */
-        get rendererTypeName() {
-            return 'HicRenderer';
+        colorScheme: types.maybe(types.string),
+    }))
+        .views(self => {
+        const { renderProps: superRenderProps } = self;
+        return {
+            /**
+             * #getter
+             */
+            get blockType() {
+                return 'dynamicBlocks';
+            },
+            /**
+             * #getter
+             */
+            get rendererTypeName() {
+                return 'HicRenderer';
+            },
+            /**
+             * #method
+             */
+            renderProps() {
+                const config = self.rendererType.configSchema.create({
+                    ...getConf(self, 'renderer'),
+                    // add specific jexl color callback when using pre-defined color schemes
+                    ...(self.colorScheme
+                        ? { color: 'jexl:interpolate(count,scale)' }
+                        : {}),
+                }, getEnv(self));
+                return {
+                    ...superRenderProps(),
+                    config,
+                    rpcDriverName: self.rpcDriverName,
+                    displayModel: self,
+                    resolution: self.resolution,
+                    useLogScale: self.useLogScale,
+                    colorScheme: self.colorScheme,
+                };
+            },
+        };
+    })
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setResolution(n) {
+            self.resolution = n;
         },
         /**
-         * #method
+         * #action
          */
-        renderProps() {
-            const config = self.rendererType.configSchema.create(getConf(self, 'renderer') || {}, getEnv(self));
-            return {
-                ...superRenderProps(),
-                config,
-                rpcDriverName: self.rpcDriverName,
-                displayModel: self,
-                resolution: self.resolution,
-            };
+        setUseLogScale(f) {
+            self.useLogScale = f;
         },
-    };
-})
-    .actions(self => ({
-    /**
-     * #action
-     */
-    setResolution(n) {
-        self.resolution = n;
-    },
-}))
-    .views(self => {
-    const { trackMenuItems: superTrackMenuItems } = self;
-    return {
         /**
-         * #getter
+         * #action
          */
-        trackMenuItems() {
-            return [
-                ...superTrackMenuItems(),
-                {
-                    label: 'Resolution',
-                    subMenu: [
-                        {
-                            label: 'Finer resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution * 2);
+        setColorScheme(f) {
+            self.colorScheme = f;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
+            /**
+             * #getter
+             */
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Use log scale',
+                        type: 'checkbox',
+                        checked: self.useLogScale,
+                        onClick: () => self.setUseLogScale(!self.useLogScale),
+                    },
+                    {
+                        label: 'Color scheme',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Fall',
+                                onClick: () => self.setColorScheme('fall'),
                             },
-                        },
-                        {
-                            label: 'Coarser resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution / 2);
+                            {
+                                label: 'Viridis',
+                                onClick: () => self.setColorScheme('viridis'),
                             },
-                        },
-                    ],
-                },
-            ];
-        },
-    };
-});
+                            {
+                                label: 'Juicebox',
+                                onClick: () => self.setColorScheme('juicebox'),
+                            },
+                            {
+                                label: 'Clear',
+                                onClick: () => self.setColorScheme(undefined),
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Resolution',
+                        subMenu: [
+                            {
+                                label: 'Finer resolution',
+                                onClick: () => self.setResolution(self.resolution * 2),
+                            },
+                            {
+                                label: 'Coarser resolution',
+                                onClick: () => self.setResolution(self.resolution / 2),
+                            },
+                        ],
+                    },
+                ];
+            },
+        };
+    });
+}

package/esm/index.js

@@ -1,10 +1,11 @@
 import Plugin from '@jbrowse/core/Plugin';
 import { colord } from '@jbrowse/core/util/colord';
+import { getFileName, } from '@jbrowse/core/util/tracks';
+// locals
 import HicRendererF from './HicRenderer';
 import HicTrackF from './HicTrack';
 import LinearHicDisplayF from './LinearHicDisplay';
 import HicAdapterF from './HicAdapter';
-import { getFileName, } from '@jbrowse/core/util/tracks';
 export default class HicPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -30,16 +31,15 @@ export default class HicPlugin extends Plugin {
                 else if (adapterHint === adapterName) {
                     return obj;
                 }
-                return adapterGuesser(file, index, adapterHint);
+                else {
+                    return adapterGuesser(file, index, adapterHint);
+                }
             };
         });
         pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
-            return (adapterName) => {
-                if (adapterName === 'HicAdapter') {
-                    return 'HicTrack';
-                }
-                return trackTypeGuesser(adapterName);
-            };
+            return (adapterName) => adapterName === 'HicAdapter'
+                ? 'HicTrack'
+                : trackTypeGuesser(adapterName);
         });
     }
     configure(pluginManager) {
@@ -47,5 +47,6 @@ export default class HicPlugin extends Plugin {
         jexl.addFunction('alpha', (color, n) => color.alpha(n));
         jexl.addFunction('hsl', (color) => colord(color.toHsl()));
         jexl.addFunction('colorString', (color) => color.toHex());
+        jexl.addFunction('interpolate', (count, scale) => scale(count));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-hic",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "description": "JBrowse 2 hic adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -36,6 +36,8 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
+    "d3-interpolate": "^2.0.1",
+    "d3-scale-chromatic": "^2.0.0",
     "hic-straw": "^2.0.3"
   },
   "peerDependencies": {
@@ -54,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
+  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
 }