@jbrowse/plugin-hic 2.10.2 → 2.11.0

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/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/LinearHicDisplay/model.d.ts

@@ -36,8 +36,15 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -74,24 +81,19 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #getter
+             */
             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;
@@ -104,11 +106,17 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
-            error: unknown;
+            error: unknown; /**
+             * #property
+             */
             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>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>; /**
+             * #getter
+             */
+            type: import("mobx-state-tree").ISimpleType<string>; /**
+             * #method
+             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -124,7 +132,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string;
+            rendererTypeName: string; /**
+             * #action
+             */
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -159,7 +169,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     setHeight(displayHeight: number): number;
     resizeHeight(distance: number): number;
 } & {
-    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
+    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined; /**
+     * #getter
+     */
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
     currStatsBpPerPx: number;
 } & {
@@ -234,11 +246,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<{
@@ -277,8 +312,15 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -315,7 +357,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #getter
+             */
             defaultValue: string;
             contextVariable: string[];
         };

package/dist/LinearHicDisplay/model.js

@@ -23,6 +23,14 @@ exports.default = (configSchema) => mobx_state_tree_1.types
      * #property
      */
     resolution: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 1),
+    /**
+     * #property
+     */
+    useLogScale: false,
+    /**
+     * #property
+     */
+    colorScheme: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
 }))
     .views(self => {
     const { renderProps: superRenderProps } = self;
@@ -43,13 +51,21 @@ exports.default = (configSchema) => mobx_state_tree_1.types
          * #method
          */
         renderProps() {
-            const config = self.rendererType.configSchema.create((0, configuration_1.getConf)(self, 'renderer') || {}, (0, mobx_state_tree_1.getEnv)(self));
+            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,
             };
         },
     };
@@ -61,6 +77,18 @@ exports.default = (configSchema) => mobx_state_tree_1.types
     setResolution(n) {
         self.resolution = n;
     },
+    /**
+     * #action
+     */
+    setUseLogScale(f) {
+        self.useLogScale = f;
+    },
+    /**
+     * #action
+     */
+    setColorScheme(f) {
+        self.colorScheme = f;
+    },
 }))
     .views(self => {
     const { trackMenuItems: superTrackMenuItems } = self;
@@ -71,20 +99,44 @@ exports.default = (configSchema) => mobx_state_tree_1.types
         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: '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);
-                            },
+                            onClick: () => self.setResolution(self.resolution * 2),
                         },
                         {
                             label: 'Coarser resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution / 2);
-                            },
+                            onClick: () => self.setResolution(self.resolution / 2),
                         },
                     ],
                 },

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/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/LinearHicDisplay/model.d.ts

@@ -36,8 +36,15 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -74,24 +81,19 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #getter
+             */
             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;
@@ -104,11 +106,17 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
-            error: unknown;
+            error: unknown; /**
+             * #property
+             */
             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>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>; /**
+             * #getter
+             */
+            type: import("mobx-state-tree").ISimpleType<string>; /**
+             * #method
+             */
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
             rendererTypeName: string;
@@ -124,7 +132,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string;
+            rendererTypeName: string; /**
+             * #action
+             */
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -159,7 +169,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
     setHeight(displayHeight: number): number;
     resizeHeight(distance: number): number;
 } & {
-    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
+    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined; /**
+     * #getter
+     */
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
     currStatsBpPerPx: number;
 } & {
@@ -234,11 +246,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<{
@@ -277,8 +312,15 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            model: any;
-        }) => any;
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: import("react").ReactNode;
+                filled?: boolean | undefined;
+                status?: string | undefined;
+                reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+            };
+        }) => import("react").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -315,7 +357,9 @@ declare const _default: (configSchema: AnyConfigurationSchemaType) => import("mo
         };
         mouseover: {
             type: string;
-            description: string;
+            description: string; /**
+             * #getter
+             */
             defaultValue: string;
             contextVariable: string[];
         };

package/esm/LinearHicDisplay/model.js

@@ -21,6 +21,14 @@ export default (configSchema) => types
      * #property
      */
     resolution: types.optional(types.number, 1),
+    /**
+     * #property
+     */
+    useLogScale: false,
+    /**
+     * #property
+     */
+    colorScheme: types.maybe(types.string),
 }))
     .views(self => {
     const { renderProps: superRenderProps } = self;
@@ -41,13 +49,21 @@ export default (configSchema) => types
          * #method
          */
         renderProps() {
-            const config = self.rendererType.configSchema.create(getConf(self, 'renderer') || {}, getEnv(self));
+            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,
             };
         },
     };
@@ -59,6 +75,18 @@ export default (configSchema) => types
     setResolution(n) {
         self.resolution = n;
     },
+    /**
+     * #action
+     */
+    setUseLogScale(f) {
+        self.useLogScale = f;
+    },
+    /**
+     * #action
+     */
+    setColorScheme(f) {
+        self.colorScheme = f;
+    },
 }))
     .views(self => {
     const { trackMenuItems: superTrackMenuItems } = self;
@@ -69,20 +97,44 @@ export default (configSchema) => types
         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: '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);
-                            },
+                            onClick: () => self.setResolution(self.resolution * 2),
                         },
                         {
                             label: 'Coarser resolution',
-                            onClick: () => {
-                                self.setResolution(self.resolution / 2);
-                            },
+                            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.2",
+  "version": "2.11.0",
   "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": "7ca3b7db337ebd88853e2d96cdab940ed550c4fb"
+  "gitHead": "3d43a820b9274a6160aa4dc15616147f390d9094"
 }