higlass 1.13.4 → 1.13.5

package/app/scripts/AxisPixi.js

@@ -2,9 +2,11 @@
 import { format } from 'd3-format';
 
 // Configs
-import { GLOBALS, THEME_DARK } from './configs';
+import GLOBALS from './configs/globals';
+import { THEME_DARK } from './configs/themes';
 
-import { colorToHex } from './utils';
+// Utils
+import colorToHex from './utils/color-to-hex';
 
 const TICK_HEIGHT = 40;
 const TICK_MARGIN = 0;

package/app/scripts/ChromosomeInfo.js

@@ -1,9 +1,11 @@
 // @ts-nocheck
 import { tsvParseRows } from 'd3-dsv';
 import { tileProxy } from './services';
-import { absToChr, chrToAbs, parseChromsizesRows } from './utils';
 
-import { fake as fakePubSub } from './hocs/with-pub-sub';
+import absToChr from './utils/abs-to-chr';
+import chrToAbs from './utils/chr-to-abs';
+import parseChromsizesRows from './utils/parse-chromsizes-rows';
+import fakePubSub from './utils/fake-pub-sub';
 
 function ChromosomeInfo(filepath, success, pubSub = fakePubSub) {
   const ret = {};

package/app/scripts/HeatmapOptions.jsx

@@ -216,7 +216,10 @@ class HeatmapOptions extends React.Component {
                       <td className="td-track-options">Preview</td>
                     </tr>
                     <tr>
-                      <td className="td-track-options">
+                      <td
+                        className="td-track-options"
+                        aria-label="Track options"
+                      >
                         <div style={{ width: 200 }}>
                           <HiGlassComponent
                             options={{ bounded: false }}

package/app/scripts/HeatmapTiledPixiTrack.js

@@ -5,30 +5,36 @@ import { format } from 'd3-format';
 import { scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 import slugid from 'slugid';
-import {
-  colorToRgba,
-  absToChr,
-  colorDomainToRgbaArray,
-  colorToHex,
-  download,
-  ndarrayAssign,
-  ndarrayFlatten,
-  objVals,
-  showMousePosition,
-  valueToColor,
-} from './utils';
+
+// Utils
+import colorToRgba from './utils/color-to-rgba';
+import absToChr from './utils/abs-to-chr';
+import colorDomainToRgbaArray from './utils/color-domain-to-rgba-array';
+import colorToHex from './utils/color-to-hex';
+import { download } from './utils/download';
+import ndarrayAssign from './utils/ndarray-assign';
+import ndarrayFlatten from './utils/ndarray-flatten';
+import objVals from './utils/obj-vals';
+import showMousePosition from './utils/show-mouse-position';
+import valueToColor from './utils/value-to-color';
 
 import TiledPixiTrack, { getValueScale } from './TiledPixiTrack';
 import AxisPixi from './AxisPixi';
 
 // Services
-import { tileProxy } from './services';
-
 import {
-  GLOBALS,
-  HEATED_OBJECT_MAP,
-  NUM_PRECOMP_SUBSETS_PER_2D_TTILE,
-} from './configs';
+  tileDataToPixData,
+  calculateTileWidth,
+  calculateTilesFromResolution,
+  calculateTiles,
+  calculateResolution,
+  calculateZoomLevelFromResolutions,
+  calculateZoomLevel,
+} from './services/tile-proxy';
+
+import GLOBALS from './configs/globals';
+import { NUM_PRECOMP_SUBSETS_PER_2D_TTILE } from './configs/dense-data-extrema-config';
+import { HEATED_OBJECT_MAP } from './configs/colormaps';
 
 const COLORBAR_MAX_HEIGHT = 200;
 const COLORBAR_WIDTH = 10;
@@ -973,7 +979,7 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
       ? Math.min(this.tilesetInfo.max_zoom, zoomLevel)
       : zoomLevel;
 
-    const calculatedWidth = tileProxy.calculateTileWidth(
+    const calculatedWidth = calculateTileWidth(
       this.tilesetInfo,
       zoomLevel,
       this.binsPerTile(),
@@ -1230,7 +1236,7 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
       }
     }
 
-    tileProxy.tileDataToPixData(
+    tileDataToPixData(
       tile,
       scaleType,
       this.limitedValueScale.domain(),
@@ -1625,20 +1631,20 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
         .map((x) => +x)
         .sort((a, b) => b - a);
 
-      this.xTiles = tileProxy.calculateTilesFromResolution(
+      this.xTiles = calculateTilesFromResolution(
         sortedResolutions[this.zoomLevel],
         this._xScale,
         this.tilesetInfo.min_pos[0],
         this.tilesetInfo.max_pos[0],
       );
-      this.yTiles = tileProxy.calculateTilesFromResolution(
+      this.yTiles = calculateTilesFromResolution(
         sortedResolutions[this.zoomLevel],
         this._yScale,
         this.tilesetInfo.min_pos[0],
         this.tilesetInfo.max_pos[0],
       );
     } else {
-      this.xTiles = tileProxy.calculateTiles(
+      this.xTiles = calculateTiles(
         this.zoomLevel,
         this._xScale,
         this.tilesetInfo.min_pos[0],
@@ -1647,7 +1653,7 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
         this.tilesetInfo.max_width,
       );
 
-      this.yTiles = tileProxy.calculateTiles(
+      this.yTiles = calculateTiles(
         this.zoomLevel,
         this._yScale,
         this.options.reverseYAxis
@@ -1674,6 +1680,28 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
     );
   }
 
+  contextMenuItems(trackX, trackY) {
+    /* Get a list of context menu items to display and the actions
+         to take */
+
+    // This should return items like this:
+
+    // return [
+    //   {
+    //     label: 'Change background color to black',
+    //     onClick: (evt, onTrackOptionsChanged) => {
+    //       // The onTrackOptionsChanged handler will handle any changes
+    //       // to the track's options that are triggered in this event.
+    //       // The only thing that needs to be passed is the new option being
+    //       // passed
+    //       onTrackOptionsChanged({ backgroundColor: 'black' });
+    //     },
+    //   },
+    // ];
+
+    return [];
+  }
+
   getMouseOverHtml(trackX, trackY) {
     if (!this.options || !this.options.showTooltip) {
       return '';
@@ -1683,7 +1711,7 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
       return '';
     }
 
-    const currentResolution = tileProxy.calculateResolution(
+    const currentResolution = calculateResolution(
       this.tilesetInfo,
       this.zoomLevel,
     );
@@ -1803,13 +1831,13 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
     let zoomLevel = null;
 
     if (this.tilesetInfo.resolutions) {
-      const zoomIndexX = tileProxy.calculateZoomLevelFromResolutions(
+      const zoomIndexX = calculateZoomLevelFromResolutions(
         this.tilesetInfo.resolutions,
         this._xScale,
         minX,
         maxX,
       );
-      const zoomIndexY = tileProxy.calculateZoomLevelFromResolutions(
+      const zoomIndexY = calculateZoomLevelFromResolutions(
         this.tilesetInfo.resolutions,
         this._yScale,
         minY,
@@ -1818,14 +1846,14 @@ class HeatmapTiledPixiTrack extends TiledPixiTrack {
 
       zoomLevel = Math.min(zoomIndexX, zoomIndexY);
     } else {
-      const xZoomLevel = tileProxy.calculateZoomLevel(
+      const xZoomLevel = calculateZoomLevel(
         this._xScale,
         this.tilesetInfo.min_pos[0],
         this.tilesetInfo.max_pos[0],
         this.binsPerTile(),
       );
 
-      const yZoomLevel = tileProxy.calculateZoomLevel(
+      const yZoomLevel = calculateZoomLevel(
         this._xScale,
         this.tilesetInfo.min_pos[1],
         this.tilesetInfo.max_pos[1],

package/app/scripts/MapboxTilesTrack.js

@@ -17,9 +17,10 @@ class MapboxTilesTrack extends OSMTilesTrack {
     this.style = options.style;
 
     if (!this.options.accessToken) {
-      this.errorTextText =
+      this.setError(
         "No access token provided in the viewconf's track options " +
-        "('accessToken' option).";
+          "('accessToken' option).",
+      );
       this.drawError();
     }
   }

package/app/scripts/PixiTrack.js

@@ -3,10 +3,10 @@ import slugid from 'slugid';
 
 import Track from './Track';
 
-import { colorToHex } from './utils';
+import colorToHex from './utils/color-to-hex';
 
 // Configs
-import { GLOBALS } from './configs';
+import GLOBALS from './configs/globals';
 import {
   isResolutionsTilesetInfo,
   isLegacyTilesetInfo,
@@ -208,12 +208,14 @@ class PixiTrack extends Track {
     this.errorText.anchor.x = 0.5;
     this.errorText.anchor.y = 0.5;
     this.pLabel.addChild(this.errorText);
-    /** @type {string} */
-    this.errorTextText = '';
+
     /** @type {boolean} */
     this.flipText = false;
     /** @type {import('./types').TilesetInfo | undefined} */
     this.tilesetInfo = undefined;
+
+    /** @type {{ [key: string]: string }} */
+    this.errorTexts = {};
   }
 
   setLabelText() {
@@ -294,15 +296,38 @@ class PixiTrack extends Track {
     );
   }
 
+  /** Set an error for this track.
+   *
+   * The error can be associated with a source so that multiple
+   * components within the track can set their own independent errors
+   * that will be displayed to the user without overlapping.
+   *
+   * @param {string} error The error text
+   * @param {string} source The source of the error
+   */
+  setError(error, source) {
+    this.errorTexts[source] = error;
+
+    this.drawError();
+  }
+
   drawError() {
     this.errorText.x = this.position[0] + this.dimensions[0] / 2;
     this.errorText.y = this.position[1] + this.dimensions[1] / 2;
 
-    this.errorText.text = this.errorTextText;
+    // Collect all the error texts, filter out the ones that are empty
+    // and put the non-empty ones separate lines
+    const errorTextText = Object.values(this.errorTexts)
+      .filter((x) => x && x.length)
+      .reduce((acc, x) => (acc ? `${acc}\n${x}` : x), '');
 
-    if (this.errorTextText && this.errorTextText.length) {
+    this.errorText.text = errorTextText;
+    this.errorText.alpha = 0.8;
+
+    if (errorTextText && errorTextText.length) {
       // draw a red border around the track to bring attention to its
       // error
+
       const graphics = this.pBorder;
       graphics.clear();
       graphics.lineStyle(1, colorToHex('red'));
@@ -313,6 +338,8 @@ class PixiTrack extends Track {
         this.dimensions[0],
         this.dimensions[1],
       );
+    } else {
+      this.pBorder.clear();
     }
   }
 

package/app/scripts/RasterTilesTrack.js

@@ -16,8 +16,9 @@ class RasterTilesTrack extends OSMTilesTrack {
     this.style = options.style;
 
     if (!this.options.tileSource) {
-      this.errorTextText =
-        'No tile source string provided in the options. It should be in the form of http://a.com/{z}/{x}/{y}';
+      this.setError(
+        'No tile source string provided in the options. It should be in the form of http://a.com/{z}/{x}/{y}',
+      );
       this.drawError();
     }
   }

package/app/scripts/SeriesListMenu.jsx

@@ -13,6 +13,52 @@ import OPTIONS_INFO from './options-info';
 // Styles
 import classes from '../styles/ContextMenu.module.scss';
 
+/**
+ *  We're going to get the track object to see if it has a
+ *  context menu handler that will give use context menu items
+ *  to display
+ *
+ * @param (Dict) track The config for the track we're getting context menu
+ *  items for
+ *
+ * @param (TrackRenderer) trackRenderer The track renderer for the view
+ *  containing this track. We'll use it to get the track's object
+ *
+ * @param (Dict) position The position of the track. Relevant are the canvasLeft,
+ *  canvasRight positions which mark where the track starts relative to the
+ *  canvas. This is important because all coordinates within a track are relative
+ *  to left and top coordinates.
+ */
+
+function findTrackContextMenuItems(track, trackRenderer, position) {
+  let trackObj = trackRenderer.getTrackObject(track.uid);
+
+  // The track may be a LeftTrackModifier track
+  trackObj = trackObj.originalTrack || trackObj;
+
+  // See if the track will provide us with context menu items
+  if (trackObj.contextMenuItems) {
+    let trackLeft = position.canvasLeft - trackObj.position[0];
+    let trackTop = position.canvasTop - trackObj.position[1];
+
+    if (trackObj.flipText) {
+      // This is a left track modifier track so we need to swap the
+      // left and right values
+      const temp = trackLeft;
+      trackLeft = trackTop;
+      trackTop = temp;
+    }
+
+    const items = trackObj.contextMenuItems(trackLeft, trackTop);
+
+    return items || [];
+  }
+
+  // The track doesn't have a contextMenuItems function so we it's
+  // obviously not providing any items.
+  return [];
+}
+
 export default class SeriesListMenu extends ContextMenuContainer {
   getConfigureSeriesMenu(position, bbox, track) {
     const menuItems = {};
@@ -283,6 +329,12 @@ export default class SeriesListMenu extends ContextMenuContainer {
   render() {
     let exportDataMenuItem = null;
 
+    const trackContextMenuItems = findTrackContextMenuItems(
+      this.props.track,
+      this.props.trackRenderer,
+      this.props.position,
+    );
+
     if (
       TRACKS_INFO_BY_TYPE[this.props.series.type] &&
       TRACKS_INFO_BY_TYPE[this.props.series.type].exportable
@@ -333,6 +385,29 @@ export default class SeriesListMenu extends ContextMenuContainer {
           top: this.state.top,
         }}
       >
+        {trackContextMenuItems.map((x) => (
+          <ContextMenuItem
+            key={x.label}
+            onClick={(evt) => {
+              x.onClick(evt, (newOptions) => {
+                // We're going to pass in a handler to that the track
+                // can use to change its options
+                this.props.onTrackOptionsChanged(this.props.track.uid, {
+                  ...this.props.track.options,
+                  ...newOptions,
+                });
+              });
+              this.props.closeMenu();
+            }}
+            onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+            className={classes['context-menu-item']}
+          >
+            <span className={classes['context-menu-span']}>{x.label}</span>
+          </ContextMenuItem>
+        ))}
+        {trackContextMenuItems.length > 0 && (
+          <hr className={classes['context-menu-hr']} />
+        )}
         <ContextMenuItem
           onClick={() => {}}
           onMouseEnter={(e) =>

package/app/scripts/SeriesListSubmenuMixin.jsx

@@ -28,6 +28,9 @@ const SeriesListSubmenuMixin = Mixin(
             };
           }
 
+          position.canvasLeft = this.props.position.canvasLeft;
+          position.canvasTop = this.props.position.canvasTop;
+
           const series = getAllTracksAndSubtracks(this.props.tracks);
           const selectedTrack = series.filter(
             (t) => t.uid === this.state.submenuShown.uid,
@@ -65,6 +68,7 @@ const SeriesListSubmenuMixin = Mixin(
               theme={this.props.theme}
               track={selectedTrack}
               trackOrientation={this.props.trackOrientation}
+              trackRenderer={this.props.trackRenderer}
               trackSourceServers={this.props.trackSourceServers}
             />
           );

package/app/scripts/TiledPixiTrack.js

@@ -3,15 +3,17 @@ import { scaleLinear, scaleLog, scaleQuantile } from 'd3-scale';
 import { median, range, ticks } from 'd3-array';
 import slugid from 'slugid';
 
-import { DataFetcher } from './data-fetchers';
+import DataFetcher from './data-fetchers/DataFetcher';
 import PixiTrack from './PixiTrack';
 
 // Utils
-import { throttleAndDebounce, parseChromsizesRows } from './utils';
+import throttleAndDebounce from './utils/throttle-and-debounce';
+import parseChromsizesRows from './utils/parse-chromsizes-rows';
 import backgroundTaskScheduler from './utils/background-task-scheduler';
 
 // Configs
-import { GLOBALS, ZOOM_DEBOUNCE } from './configs';
+import GLOBALS from './configs/globals';
+import { ZOOM_DEBOUNCE } from './configs/primitives';
 
 /**
  * Get a valueScale for a heatmap.
@@ -222,12 +224,6 @@ class TiledPixiTrack extends PixiTrack {
     });
   }
 
-  setError(error) {
-    this.errorTextText = error;
-    this.draw();
-    this.animate();
-  }
-
   setFixedValueScaleMin(value) {
     if (!Number.isNaN(+value)) this.fixedValueScaleMin = +value;
     else this.fixedValueScaleMin = null;
@@ -623,6 +619,9 @@ class TiledPixiTrack extends PixiTrack {
   }
 
   fetchNewTiles(toFetch) {
+    this._checkForErrors();
+    this.draw();
+
     if (toFetch.length > 0) {
       const toFetchList = [...new Set(toFetch.map((x) => x.remoteId))];
 
@@ -727,6 +726,29 @@ class TiledPixiTrack extends PixiTrack {
     }
   }
 
+  _checkForErrors() {
+    const errors = Object.values(this.fetchedTiles)
+      .map(
+        (x) =>
+          x.tileData && x.tileData.error && `${x.tileId}: ${x.tileData.error}`,
+      )
+      .filter((x) => x);
+
+    if (errors.length) {
+      this.errorTexts.TiledPixiTrack = errors.join('\n');
+    } else {
+      this.errorTexts.TiledPixiTrack = '';
+    }
+
+    if (this.tilesetInfoError) {
+      this.errorTexts.TiledPixiTrack = this.tilesetInfoError;
+
+      errors.push(this.tilesetInfoError);
+    }
+
+    return errors;
+  }
+
   draw() {
     if (this.delayDrawing) return;
 
@@ -754,18 +776,8 @@ class TiledPixiTrack extends PixiTrack {
         uuid: this.uuid,
       });
     }
-    const errors = Object.values(this.fetchedTiles)
-      .map(
-        (x) =>
-          x.tileData && x.tileData.error && `${x.tileId}: ${x.tileData.error}`,
-      )
-      .filter((x) => x);
 
-    if (errors.length) {
-      this.errorTextText = errors.join('\n');
-    } else {
-      this.errorTextText = '';
-    }
+    this._checkForErrors();
 
     super.draw();
 

package/app/scripts/TiledPlot.jsx

@@ -1615,6 +1615,7 @@ class TiledPlot extends React.Component {
             position={this.state.contextMenuPosition}
             theme={this.props.theme}
             tracks={relevantTracks}
+            trackRenderer={this.trackRenderer}
             trackSourceServers={this.props.trackSourceServers}
           />
         </PopupMenu>
@@ -2228,6 +2229,7 @@ class TiledPlot extends React.Component {
               this.props.tracks,
               this.state.configTrackMenuId,
             )}
+            trackRenderer={this.trackRenderer}
             tracks={[
               getTrackByUid(this.props.tracks, this.state.configTrackMenuId),
             ]}

package/app/scripts/Track.js

@@ -1,8 +1,8 @@
 import { scaleLinear } from 'd3-scale';
-import { fake as fakePubSub } from './hocs/with-pub-sub';
 
 // Services
-import { isWithin } from './utils';
+import isWithin from './utils/is-within';
+import fakePubSub from './utils/fake-pub-sub';
 
 /**
  * @typedef TrackContext

package/app/scripts/UnknownPixiTrack.js

@@ -7,7 +7,7 @@ class UnknownPixiTrack extends PixiTrack {
     // so that the tests checking for retrieved tilesetInfo pass
     this.tilesetInfo = {};
 
-    this.errorTextText = `Unknown track type: ${options.type}`;
+    this.setError(`Unknown track type: ${options.type}`);
   }
 
   zoomed() {