higlass 1.11.11 → 1.12.0

package/app/scripts/data-fetchers/get-data-fetcher.js

@@ -3,13 +3,18 @@ import LocalDataFetcher from './local-tile-fetcher';
 import DataFetcher from '../DataFetcher';
 import { AVAILABLE_FOR_PLUGINS } from '../configs';
 
-const getDataFetcher = (dataConfig, pubSub, pluginDataFetchers) => {
+const getDataFetcher = (
+  dataConfig,
+  pubSub,
+  pluginDataFetchers,
+  availableForPlugins = AVAILABLE_FOR_PLUGINS,
+) => {
   // Check if a plugin data fetcher is available.
   const pluginDataFetcher = pluginDataFetchers[dataConfig.type];
   if (pluginDataFetcher) {
     // eslint-disable-next-line new-cap
     return new pluginDataFetcher.dataFetcher(
-      AVAILABLE_FOR_PLUGINS,
+      availableForPlugins,
       dataConfig,
       pubSub,
     );

package/app/scripts/{hglib.js → hglib.jsx}

@@ -32,7 +32,7 @@ export {
   getTrackObjectFromHGC,
 } from './utils';
 
-export const version = VERSION;
+export { version } from '../../package.json';
 
 const launch = (element, config, options) => {
   /**

package/app/scripts/{icons.js → icons.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { select } from 'd3-selection';
-import '../styles/ViewHeader.module.scss';
+import classes from '../styles/ViewHeader.module.scss';
 
 export const COG = {
   id: 'cog',
@@ -160,8 +160,10 @@ const parser = new DOMParser();
 
 const svgGeoMapStr =
   '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path d="M4 2.1L.5 3.5v12l5-2 5 2 5-2v-12l-5 2-3.17-1.268M10.5 3.5v12" fill="none" stroke="currentColor"/><path d="M5.5 13.5v-7" fill="none" stroke="currentColor" stroke-width=".9969299999999999"/><path d="M5.494 0c-1.803 0-3.26 1.496-3.26 3.35 0 .427.124.97.264 1.343L5.5 11l3.003-6.306c.142-.375.263-.916.263-1.342C8.766 1.496 7.3 0 5.494 0zM5.5 4.64c-.76 0-1.375-.616-1.375-1.374 0-.76.616-1.376 1.375-1.376.76 0 1.374.616 1.374 1.376 0 .758-.614 1.375-1.374 1.375z" fill="currentColor"/></svg>';
-export const svgGeoMapIcon = parser.parseFromString(svgGeoMapStr, 'text/xml')
-  .documentElement;
+export const svgGeoMapIcon = parser.parseFromString(
+  svgGeoMapStr,
+  'text/xml',
+).documentElement;
 
 const horizontal1dHeatmap = `
 <svg width="20px" height="20px" viewBox="0 0 20 20">
@@ -225,8 +227,10 @@ const tiles2DIconStr = `
 </svg>
 `;
 
-export const svg2DTilesIcon = parser.parseFromString(tiles2DIconStr, 'text/xml')
-  .documentElement;
+export const svg2DTilesIcon = parser.parseFromString(
+  tiles2DIconStr,
+  'text/xml',
+).documentElement;
 
 const heatmap2DStr = `
 <svg width="20px" height="20px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -258,8 +262,10 @@ const heatmap2DStr = `
 </svg>
 `;
 
-export const svg2DHeatmapIcon = parser.parseFromString(heatmap2DStr, 'text/xml')
-  .documentElement;
+export const svg2DHeatmapIcon = parser.parseFromString(
+  heatmap2DStr,
+  'text/xml',
+).documentElement;
 
 const axis1D = `
 <svg width="20px" height="20px" viewBox="0 0 77 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -273,8 +279,10 @@ const axis1D = `
 </svg>
 `;
 
-export const svg1DAxisIcon = parser.parseFromString(axis1D, 'text/xml')
-  .documentElement;
+export const svg1DAxisIcon = parser.parseFromString(
+  axis1D,
+  'text/xml',
+).documentElement;
 export const svgVertical1DAxisIcon = select(
   parser.parseFromString(axis1D, 'text/xml').documentElement,
 )
@@ -337,8 +345,10 @@ const tiles1DIconStr = `
 </svg>
 `;
 
-export const svg1DTilesIcon = parser.parseFromString(tiles1DIconStr, 'text/xml')
-  .documentElement;
+export const svg1DTilesIcon = parser.parseFromString(
+  tiles1DIconStr,
+  'text/xml',
+).documentElement;
 export const svgVertical1DTilesIcon = select(
   parser.parseFromString(tiles1DIconStr, 'text/xml').documentElement,
 )
@@ -375,7 +385,7 @@ export const svgArrowheadDomainsIcon = parser.parseFromString(
 export function SearchIcon({ theStyle }) {
   return (
     <svg
-      styleName={theStyle}
+      className={classes[theStyle]}
       viewBox="0 0 12 13"
       xmlns="http://www.w3.org/2000/svg"
     >

package/app/scripts/mixwith.js

@@ -1,3 +1,5 @@
+/* eslint-disable max-classes-per-file */
+
 // used by apply() and isApplicationOf()
 const _appliedMixin = '__mixwith_appliedMixin';
 // used by wrap() and unwrap()

package/app/scripts/services/tile-proxy.js

@@ -3,7 +3,7 @@ import slugid from 'slugid';
 
 import { workerGetTiles, workerSetPix } from '../worker';
 
-import { trimTrailingSlash as tts } from '../utils';
+import { trimTrailingSlash as tts, timeout as sleep } from '../utils';
 
 // Config
 import { TILE_FETCH_DEBOUNCE } from '../configs';
@@ -674,10 +674,6 @@ function text(url, callback, pubSub) {
   return fetchEither(url, callback, 'text', pubSub);
 }
 
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 /**
  * Send a JSON request and mark it so that we can tell how many are in flight
  *

package/app/scripts/utils/abs-to-chr.js

@@ -1,4 +1,4 @@
-import { chromInfoBisector } from '.';
+import chromInfoBisector from './chrom-info-bisector';
 
 const absToChr = (absPosition, chromInfo) => {
   if (!chromInfo || !chromInfo.cumPositions || !chromInfo.cumPositions.length) {

package/app/scripts/utils/dec-to-hex-str.js

@@ -1,3 +1,3 @@
-const decToHexStr = dec => (dec + 16 ** 6).toString(16).substr(-6);
+const decToHexStr = (dec) => (dec + 16 ** 6).toString(16).substr(-6);
 
 export default decToHexStr;

package/app/scripts/utils/dict-items.js

@@ -7,7 +7,6 @@ const dictItems = (dictionary) => {
 
   for (const key in dictionary) {
     if (dictionary.hasOwnProperty(key)) {
-      // eslint-disable-line no-prototype-builtins
       keyValues.push([key, dictionary[key]]);
     }
   }

package/app/scripts/utils/dict-keys.js

@@ -6,7 +6,6 @@ export default function dictKeys(dictionary) {
 
   for (const key in dictionary) {
     if (dictionary.hasOwnProperty(key)) {
-      // eslint-disable-line no-prototype-builtins
       keys.push(key);
     }
   }

package/app/scripts/utils/dict-values.js

@@ -6,7 +6,6 @@ export default function dictValues(dictionary) {
 
   for (const key in dictionary) {
     if (dictionary.hasOwnProperty(key)) {
-      // eslint-disable-line no-prototype-builtins
       values.push(dictionary[key]);
     }
   }

package/app/scripts/utils/index.js

@@ -93,5 +93,6 @@ export {
   waitForTilesLoaded,
   waitForTransitionsFinished,
   mountHGComponent,
+  mountHGComponentAsync,
   removeHGComponent,
 } from './test-helpers';

package/app/scripts/utils/range-query-2d.js

@@ -1,4 +1,5 @@
-import { addArrays, accessorTransposition } from '.';
+import addArrays from './add-arrays';
+import accessorTransposition from './accessor-transposition';
 
 /**
  * Perform a 2D query on a 1D array
@@ -22,7 +23,9 @@ const rangeQuery2d = (
   xRange,
   yRange,
   mirrored,
+  /* eslint-disable-next-line default-param-last */
   xOff = 0,
+  /* eslint-disable-next-line default-param-last */
   yOff = 0,
   outList,
 ) => {

package/app/scripts/utils/selected-items-to-size.js

@@ -8,11 +8,10 @@
  * @returns {number} The computed size value.
  * Between 0 and the total number of items in the (flattened) input array.
  */
-const selectedItemsToSize = (selectedItems, withRelativeSize) => {
-  return selectedItems.reduce(
+const selectedItemsToSize = (selectedItems, withRelativeSize) =>
+  selectedItems.reduce(
     (a, h) => a + (Array.isArray(h) && withRelativeSize ? h.length : 1),
     0,
   );
-};
 
 export default selectedItemsToSize;

package/app/scripts/utils/{test-helpers.js → test-helpers.jsx}

@@ -170,7 +170,6 @@ export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
    * -------
    *  Nothing
    */
-  // console.log('jasmine.DEFAULT_TIMEOUT_INTERVAL', jasmine.DEFAULT_TIMEOUT_INTERVAL);
   if (isWaitingOnTiles(hgc)) {
     setTimeout(() => {
       waitForTilesLoaded(hgc, tilesLoadedCallback);
@@ -184,12 +183,24 @@ export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
 /**
  * Mount a new HiGlassComponent and unmount the previously visible one.
  *
- * @param {HTML Element} div A div element to detach and recreate for the component
- * @param {Enzyme wrapped HiGlass component} prevHgc An already mounted
+ * @param {HTMLElement | null} prevDiv A div element to detach and recreate for the component
+ * @param {import('enzyme').ReactWrapper | null} prevHgc An already mounted
  *  hgc component
  * @param {function} done The callback to call when the component is fully loaded
  */
-export const mountHGComponent = (prevDiv, prevHgc, viewConf, done, options) => {
+export const mountHGComponent = (
+  prevDiv,
+  prevHgc,
+  viewConf,
+  done,
+  options = {},
+) => {
+  const {
+    style = 'width:800px; background-color: lightgreen;',
+    bounded = false,
+    extendedDelay = false,
+  } = options;
+
   if (prevHgc) {
     prevHgc.unmount();
     prevHgc.detach();
@@ -199,10 +210,6 @@ export const mountHGComponent = (prevDiv, prevHgc, viewConf, done, options) => {
     global.document.body.removeChild(prevDiv);
   }
 
-  const style =
-    (options && options.style) || 'width:800px; background-color: lightgreen;';
-  const bounded = (options && options.bounded) || false;
-
   // console.log('check:', options && options.style)
   // console.log('style:', style, "options:", options, "style", options.style);
 
@@ -220,7 +227,7 @@ export const mountHGComponent = (prevDiv, prevHgc, viewConf, done, options) => {
   hgc.update();
 
   waitForJsonComplete(() => {
-    if (options && options.extendedDelay) {
+    if (extendedDelay) {
       // Waiting for tiles to be loaded does not always mean
       // that the compoment is mounted (especially if we load the tiles
       // from the filesystem, which is quick). Wait 1000ms to make sure
@@ -236,7 +243,7 @@ export const mountHGComponent = (prevDiv, prevHgc, viewConf, done, options) => {
     }
   });
 
-  return [div, hgc];
+  return /** @type {const} */ ([div, hgc]);
 };
 
 export const removeHGComponent = (div) => {
@@ -245,3 +252,18 @@ export const removeHGComponent = (div) => {
   ReactDOM.unmountComponentAtNode(div);
   document.body.removeChild(div);
 };
+
+// ideally the "await-ers" avoid would be promises (rather than polling)
+// and that way `mountHGComponent` would be async by default.
+export async function mountHGComponentAsync(
+  prevDiv,
+  prevHgc,
+  viewConf,
+  options,
+) {
+  let res;
+  await new Promise((resolve) => {
+    res = mountHGComponent(prevDiv, prevHgc, viewConf, resolve, options);
+  });
+  return res;
+}

package/app/scripts/utils/timeout.js

@@ -1,3 +1,6 @@
-const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const timeout = (ms) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
 
 export default timeout;

package/app/scripts/utils/value-to-color.js

@@ -8,24 +8,21 @@
  * @param  {Number}  eps  Epsilon.
  * @return  {Array}  RGB color array.
  */
-const valueToColor = (
-  valueScale,
-  colorScale,
-  pseudoCounts = 0,
-  eps = 0.000001,
-) => (value) => {
-  let rgbIdx = 255;
+const valueToColor =
+  (valueScale, colorScale, pseudoCounts = 0, eps = 0.000001) =>
+  (value) => {
+    let rgbIdx = 255;
 
-  if (value > eps) {
-    // values less than espilon are considered NaNs and made transparent
-    // (rgbIdx 255)
-    rgbIdx = Math.max(
-      0,
-      Math.min(255, Math.floor(valueScale(value + pseudoCounts))),
-    );
-  }
+    if (value > eps) {
+      // values less than espilon are considered NaNs and made transparent
+      // (rgbIdx 255)
+      rgbIdx = Math.max(
+        0,
+        Math.min(255, Math.floor(valueScale(value + pseudoCounts))),
+      );
+    }
 
-  return colorScale[rgbIdx];
-};
+    return colorScale[rgbIdx];
+  };
 
 export default valueToColor;

package/app/scripts/worker.js

@@ -163,6 +163,12 @@ export function workerSetPix(
   const tileWidth = shape ? shape[1] : Math.sqrt(size);
   const pixData = new Uint8ClampedArray(filteredSize * 4);
 
+  const dToRgbIdx = (x) => {
+    const v = valueScale(x);
+    if (Number.isNaN(v)) return 254;
+    return Math.max(0, Math.min(254, Math.floor(v)));
+  };
+
   /**
    * Set the ith element of the pixData array, using value d.
    * (well not really, since i is scaled to make space for each rgb value).
@@ -182,11 +188,9 @@ export function workerSetPix(
       !Number.isNaN(+d)
     ) {
       // values less than espilon are considered NaNs and made transparent (rgbIdx 255)
-      rgbIdx = Math.max(
-        0,
-        Math.min(254, Math.floor(valueScale(d + pseudocount))),
-      );
+      rgbIdx = dToRgbIdx(d + pseudocount);
     }
+
     // let rgbIdx = qScale(d); //Math.max(0, Math.min(255, Math.floor(valueScale(ct))))
     if (rgbIdx < 0 || rgbIdx > 255) {
       console.warn(

package/app/styles/GenomePositionSearchBox.module.scss

@@ -10,14 +10,12 @@ $unit: 24px;
   align-items: stretch;
   height: 100%;
   margin-bottom: 0px;
-  font-size: $unit / 1.75;
-  transition: box-shadow $fast $ease,
-              font-size $fast $ease;
+  font-size: calc($unit / 1.75);
+  transition: box-shadow $fast $ease, font-size $fast $ease;
 }
 
 .genome-position-search-focus {
-  box-shadow: 0 0 0 1px $active,
-              0 0 3px 1px $active;
+  box-shadow: 0 0 0 1px $active, 0 0 3px 1px $active;
 }
 
 .genome-position-search-bar {
@@ -25,12 +23,12 @@ $unit: 24px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: $unit / 8;
+  padding: calc($unit / 8);
   color: #666;
   font-size: inherit;
   line-height: $unit;
   border: 0;
-  border-radius: $unit / 8 0 0 $unit / 8;
+  border-radius: calc($unit / 8) 0 0 calc($unit / 8);
   background: transparent;
 
   &:focus {
@@ -39,20 +37,21 @@ $unit: 24px;
   }
 }
 .genome-position-search-dark .genome-position-search-bar {
-  &:focus { color: $gray-lighter; }
+  &:focus {
+    color: $gray-lighter;
+  }
 }
 
 .genome-position-search-bar-button,
 .genome-position-search-bar-button-focus {
   display: block;
   height: 100%;
-  padding: 0 $unit / 3 !important;
+  padding: 0 calc($unit / 3) !important;
   color: $gray;
   border: 0 !important;
   border-radius: 0 !important;
   background: transparent;
-  transition: background $fast $ease,
-              color $fast $ease;
+  transition: background $fast $ease, color $fast $ease;
 
   &:active,
   &:focus,
@@ -74,7 +73,7 @@ $unit: 24px;
   transition: color $fast $ease;
 
   &:first-child {
-    margin-left: $unit / 4;
+    margin-left: calc($unit / 4);
     margin-right: 2px;
   }
 
@@ -91,8 +90,7 @@ $unit: 24px;
 .genome-position-search-bar-suggestions {
   position: fixed;
   border-radius: 3px;
-  box-shadow: 0 0 3px 0 $gray-lighter-rgba,
-              0 1px 5px 0 $gray-lightest-rgba;
+  box-shadow: 0 0 3px 0 $gray-lighter-rgba, 0 1px 5px 0 $gray-lightest-rgba;
   background-color: rgba(255, 255, 255, 0.95);
   border: 1px solid $gray-lighter-rgba;
   padding: 2px 0;
@@ -104,7 +102,7 @@ $unit: 24px;
 .btn {
   display: inline-block;
   margin-bottom: 0;
-  font-size: $unit / 1.75;
+  font-size: calc($unit / 1.75);
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;

package/app/styles/HiGlass.scss

@@ -1,9 +1,9 @@
-.higlass {
-  // Third party styles should be added here so that they are name spaces
-  @import '../../node_modules/react-grid-layout/css/styles.css';
-  @import '../../node_modules/react-resizable/css/styles.css';
+// Third party styles should be added here so that they are name spaces
+@import 'react-grid-layout/css/styles.css';
+@import 'react-resizable/css/styles.css';
+@import 'prism.css';
 
-  @import 'prism.css';
+.higlass {
 
   // Enforce to avoid big-finger mode in Jupyter Lab
   * {