higlass 1.13.6 → 2.0.1

package/app/scripts/HiGlassComponentContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const HiGlassComponentContext = React.createContext(null);
+
+export default HiGlassComponentContext;

package/app/scripts/SeriesListMenu.jsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import clsx from 'clsx';
 import React from 'react';
 
@@ -12,32 +11,51 @@ import OPTIONS_INFO from './options-info';
 
 // Styles
 import classes from '../styles/ContextMenu.module.scss';
+import { isObject } from './utils/type-guards';
+
+/** @import * as t from './types' */
+/** @import { TrackRenderer } from './TrackRenderer' */
+
+/**
+ * @typedef ContextMenuHandler
+ * @property {string} label
+ * @property {(evt: unknown, onTrackOptionsChanged: (options: Record<string, unknown>) => void) => void} onClick
+ */
+
+/**
+ * @param {unknown} x
+ * @returns {x is { contextMenuItems: (trackLeft: number, trackRight: number) => Array<ContextMenuHandler> }}}
+ */
+function hasContextMenuItems(x) {
+  return (
+    isObject(x) &&
+    'contextMenuItems' in x &&
+    typeof x.contextMenuItems === 'function'
+  );
+}
 
 /**
  *  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
+ * @param {t.TrackConfig} track The config for the track we're getting context menu
  *  items for
- *
- * @param (TrackRenderer) trackRenderer The track renderer for the view
+ * @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.
+ * @param {{canvasLeft: number, canvasTop: number}} position The position of the track.
+ *  Where the track starts relative to the canvas. This is important because all
+ *  coordinates within a track are relative to left and top coordinates.
+ * @returns {Array<ContextMenuHandler>}
  */
-
 function findTrackContextMenuItems(track, trackRenderer, position) {
   let trackObj = trackRenderer.getTrackObject(track.uid);
 
   // The track may be a LeftTrackModifier track
-  trackObj = trackObj.originalTrack || trackObj;
+  trackObj = trackObj?.originalTrack || trackObj;
 
   // See if the track will provide us with context menu items
-  if (trackObj.contextMenuItems) {
+  if (hasContextMenuItems(trackObj)) {
     let trackLeft = position.canvasLeft - trackObj.position[0];
     let trackTop = position.canvasTop - trackObj.position[1];
 
@@ -59,8 +77,22 @@ function findTrackContextMenuItems(track, trackRenderer, position) {
   return [];
 }
 
+/**
+ * @typedef MenuItem
+ * @property {string} name
+ * @property {string} [value]
+ * @property {Record<string, unknown>} [children]
+ * @property {() => void} [handler]
+ */
+
 export default class SeriesListMenu extends ContextMenuContainer {
+  /**
+   * @param {unknown} position
+   * @param {unknown} bbox
+   * @param {{ type: string, options: Record<string, unknown>, uid: string, }} track
+   */
   getConfigureSeriesMenu(position, bbox, track) {
+    /** @type {Record<string, MenuItem>} */
     const menuItems = {};
 
     // plugin tracks can offer their own options
@@ -73,26 +105,27 @@ export default class SeriesListMenu extends ContextMenuContainer {
 
     if (pluginOptionsInfo) {
       for (const key of Object.keys(pluginOptionsInfo)) {
+        // @ts-expect-error - extends OPTIONS_INFO with new data
         OPTIONS_INFO[key] = pluginOptionsInfo[key];
       }
     }
 
-    if (
-      !TRACKS_INFO_BY_TYPE[track.type] ||
-      !TRACKS_INFO_BY_TYPE[track.type].availableOptions
-    ) {
+    const trackinfo = TRACKS_INFO_BY_TYPE[track.type];
+
+    if (!trackinfo?.availableOptions) {
       return null;
     }
 
-    for (const optionType of TRACKS_INFO_BY_TYPE[track.type].availableOptions) {
+    for (const optionType of trackinfo.availableOptions) {
       if (optionType in OPTIONS_INFO) {
-        menuItems[optionType] = { name: OPTIONS_INFO[optionType].name };
+        const optionInfo =
+          OPTIONS_INFO[/** @type {keyof typeof OPTIONS_INFO} */ (optionType)];
+        menuItems[optionType] = { name: optionInfo.name };
 
         // can we dynamically generate some options?
         // should be used if the options depend on tileset info or other current state
-        if (OPTIONS_INFO[optionType].generateOptions) {
-          const generatedOptions =
-            OPTIONS_INFO[optionType].generateOptions(track);
+        if ('generateOptions' in optionInfo) {
+          const generatedOptions = optionInfo.generateOptions(track);
 
           if (!menuItems[optionType].children) {
             menuItems[optionType].children = {};
@@ -114,12 +147,11 @@ export default class SeriesListMenu extends ContextMenuContainer {
           }
         }
 
-        if (OPTIONS_INFO[optionType].inlineOptions) {
+        if ('inlineOptions' in optionInfo) {
           // we can simply select this option from the menu
-          for (const inlineOptionKey in OPTIONS_INFO[optionType]
-            .inlineOptions) {
-            const inlineOption =
-              OPTIONS_INFO[optionType].inlineOptions[inlineOptionKey];
+          for (const inlineOptionKey in optionInfo.inlineOptions) {
+            /** @type {Record<string, Record<string, { name: string, value: unknown }>>} */
+            const inlineOption = optionInfo.inlineOptions[inlineOptionKey];
 
             // check if there's already available options (e.g.
             // "Top right") for this option type (e.g. "Label
@@ -132,11 +164,15 @@ export default class SeriesListMenu extends ContextMenuContainer {
               name: inlineOption.name,
               value: inlineOption.value,
               // missing handler to be filled in below
+              handler: () => {},
             };
 
             // is there a custom component available for picking this
             // option type value (e.g. 'custom' color scale)
-            if (inlineOption.componentPickers?.[track.type]) {
+            if (
+              inlineOption.componentPickers &&
+              track.type in inlineOption.componentPickers
+            ) {
               optionSelectorSettings.handler = () => {
                 this.props.onConfigureTrack(
                   track,
@@ -157,12 +193,14 @@ export default class SeriesListMenu extends ContextMenuContainer {
             menuItems[optionType].children[inlineOptionKey] =
               optionSelectorSettings;
           }
-        } else if (OPTIONS_INFO[optionType].componentPickers?.[track.type]) {
+          // @ts-expect-error - mutated from a plugin
+        } else if (track.type in optionInfo.componentPickers) {
           // there's an option picker registered
           menuItems[optionType].handler = () => {
             this.props.onConfigureTrack(
               track,
-              OPTIONS_INFO[optionType].componentPickers[track.type],
+              // @ts-expect-error - mutated from a plugin
+              optionInfo.componentPickers[track.type],
             );
             this.props.closeMenu();
           };
@@ -189,23 +227,20 @@ export default class SeriesListMenu extends ContextMenuContainer {
    *
    * @param {Object} position The position where to draw ths menu (e.g. {left: 42, top: 88})
    *
-   * @param (Object) bbox
+   * @param {Object} bbox
    *  The bounding box of the parent menu, used to determine whether
    *  to draw the child menu on the left or the right
    *
-   * @param (Object) track The track definition for this series (as in the viewconf)
+   * @param {{ uid: string, type: string, datatype: string }} track The track definition for this series (as in the viewconf)
    */
   getTrackTypeItems(position, bbox, track) {
-    // get the datatype of the current track
-    //
-
     // if we've loaded external track types, list them here
     if (window.higlassTracksByType) {
       // Extend `TRACKS_INFO_BY_TYPE` with the configs of plugin tracks.
-      Object.keys(window.higlassTracksByType).forEach((pluginTrackType) => {
+      for (const pluginTrackType of Object.keys(window.higlassTracksByType)) {
         TRACKS_INFO_BY_TYPE[pluginTrackType] =
           window.higlassTracksByType[pluginTrackType].config;
-      });
+      }
     }
 
     let { datatype } = track;
@@ -228,6 +263,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
       .filter((x) => x.orientation === orientation)
       .map((x) => x.type);
 
+    /** @type {Record<string, MenuItem>} */
     const menuItems = {};
     for (let i = 0; i < availableTrackTypes.length; i++) {
       menuItems[availableTrackTypes[i]] = {
@@ -257,6 +293,8 @@ export default class SeriesListMenu extends ContextMenuContainer {
       // the bounding box of the element which initiated the subMenu
       // necessary so that we can position the submenu next to the initiating
       // element
+      /** @type {DOMRect} */
+      // @ts-expect-error - parent class ContextMenuContainer requires typing
       const bbox = this.state.submenuSourceBbox;
       const position =
         this.state.orientation === 'left'
@@ -273,6 +311,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
       // item that requested it provides a structure containing the option
       // picked as well as some data associated with it
       // e.g. {"option": "configure-series", data: track}
+      /** @type {{option:  string, value: { uid: string, type: string, datatype: string, options: Record<string, unknown> }}} */
       const subMenuData = this.state.submenuShown;
       const track = subMenuData.value;
 
@@ -299,7 +338,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
           onClick={() =>
             this.props.onChangeTrackData(this.props.series.uid, newData)
           }
-          onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+          onMouseEnter={(e) => this.handleOtherMouseEnter()}
         >
           <span className={classes['context-menu-span']}>Remove divisor</span>
         </ContextMenuItem>
@@ -310,7 +349,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
       <ContextMenuItem
         className={classes['context-menu-item']}
         onClick={() => this.props.onAddDivisor(this.props.series)}
-        onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+        onMouseEnter={(e) => this.handleOtherMouseEnter()}
       >
         <span className={classes['context-menu-span']}>Divide by</span>
       </ContextMenuItem>
@@ -341,7 +380,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
               this.props.track.uid,
             )
           }
-          onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+          onMouseEnter={(e) => this.handleOtherMouseEnter()}
         >
           <span className={classes['context-menu-span']}>Export Data</span>
         </ContextMenuItem>
@@ -357,7 +396,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
           this.props.onCloseTrack(this.props.series.uid);
           this.props.onAddSeries(this.props.hostTrack.uid);
         }}
-        onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+        onMouseEnter={(e) => this.handleOtherMouseEnter()}
       >
         <span className={classes['context-menu-span']}>Replace Series</span>
       </ContextMenuItem>
@@ -392,7 +431,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
               });
               this.props.closeMenu();
             }}
-            onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+            onMouseEnter={(e) => this.handleOtherMouseEnter()}
             className={classes['context-menu-item']}
           >
             <span className={classes['context-menu-span']}>{x.label}</span>
@@ -409,7 +448,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
               value: this.props.track,
             })
           }
-          onMouseLeave={(e) => this.handleMouseLeave(e)}
+          onMouseLeave={(e) => this.handleMouseLeave()}
         >
           Configure Series
           <svg className={classes['play-icon']}>
@@ -427,7 +466,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
               value: this.props.track,
             })
           }
-          onMouseLeave={(e) => this.handleMouseLeave(e)}
+          onMouseLeave={(e) => this.handleMouseLeave()}
         >
           <span className={classes['context-menu-span']}>
             Track Type
@@ -438,6 +477,17 @@ export default class SeriesListMenu extends ContextMenuContainer {
           </span>
         </ContextMenuItem>
 
+        <ContextMenuItem
+          className={classes['context-menu-item']}
+          onClick={() => {
+            this.props.apiPublish('datasetInfo', this.props.track);
+            this.props.closeMenu();
+          }}
+          onMouseEnter={(e) => this.handleOtherMouseEnter()}
+        >
+          <span className={classes['context-menu-span']}>Dataset Info</span>
+        </ContextMenuItem>
+
         {exportDataMenuItem}
 
         {this.getDivideByMenuItem()}
@@ -445,7 +495,7 @@ export default class SeriesListMenu extends ContextMenuContainer {
         <ContextMenuItem
           className={classes['context-menu-item']}
           onClick={this.props.onCloseTrack}
-          onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+          onMouseEnter={(e) => this.handleOtherMouseEnter()}
         >
           <span className={classes['context-menu-span']}>Close Series</span>
         </ContextMenuItem>

package/app/scripts/SeriesListSubmenuMixin.jsx

@@ -47,6 +47,7 @@ const SeriesListSubmenuMixin = Mixin(
               ref={(c) => {
                 this.seriesListMenu = c;
               }}
+              apiPublish={this.props.apiPublish}
               closeMenu={this.props.closeMenu}
               hostTrack={this.props.tracks[0]}
               onAddDivisor={this.props.onAddDivisor}

package/app/scripts/Tiled1DPixiTrack.js

@@ -106,7 +106,6 @@ class Tiled1DPixiTrack extends TiledPixiTrack {
         this._xScale,
         this.tilesetInfo.min_pos[0],
         this.tilesetInfo.max_pos[0],
-        this.tilesetInfo.bins_per_dimension || this.tilesetInfo.tile_size,
       );
 
       const tiles = xTiles.map((x) => [this.zoomLevel, x]);

package/app/scripts/TiledPixiTrack.js

@@ -94,6 +94,7 @@ export function getValueScale(
  * @property {Float32Array} dense
  * @property {number} minNonZero
  * @property {number} maxNonZero
+ * @property {Array<number>} [shape] - Optional 1D or 2D array dimensions
  */
 
 /**
@@ -104,7 +105,7 @@ export function getValueScale(
  *  asynchronous event occurs (i.e. tiles loaded)
  * @property {() => void} onValueScaleChanged The range of values has changed so we need to inform
  *  the higher ups that the value scale has changed. Only occurs on tracks with ``dense`` data.
- * @property {function} handleTilesetInfoReceived A callback to do something once once the tileset
+ * @property {(t: t.TilesetInfo) => void} [handleTilesetInfoReceived] A callback to do something once once the tileset
  *  info is received. Usually it registers some information about the tileset with its definition
  */
 /**
@@ -191,7 +192,7 @@ class TiledPixiTrack extends PixiTrack {
     this.valueScaleMax = null;
     this.fixedValueScaleMax = null;
 
-    /** @type {Object.<string, Array<Function>>} */
+    /** @type {Record<string, Array<Function>>} */
     this.listeners = {};
 
     /** @type {import('pub-sub-es').PubSub & { __fake__?: boolean }} */
@@ -214,6 +215,8 @@ class TiledPixiTrack extends PixiTrack {
     /** @type {t.TilesetInfo} */
     // @ts-expect-error This has to be initialized to null
     this.tilesetInfo = null;
+    /** @type {null | string} */
+    this.tilesetInfoError = null;
     this.uuid = slugid.nice();
 
     // this needs to be above the tilesetInfo() call because if that
@@ -252,7 +255,9 @@ class TiledPixiTrack extends PixiTrack {
           tilesetInfo.error,
         );
 
-        this.setError(tilesetInfo.error);
+        if (tilesetInfo.error) {
+          this.setError(tilesetInfo.error, 'dataFetcher.tilesetInfo');
+        }
         // Fritz: Not sure why it's reset
         // this.trackNotFoundText = '';
         this.tilesetInfo = undefined;
@@ -293,12 +298,11 @@ class TiledPixiTrack extends PixiTrack {
       this.tilesetInfoReceived();
 
       // Let external listeners know that tileset info was received
-      if (handleTilesetInfoReceived) handleTilesetInfoReceived(tilesetInfo);
+      handleTilesetInfoReceived?.(this.tilesetInfo);
 
       // @ts-expect-error This should never happen since options is set in Track
-      if (!this.options) this.options = {};
-
-      this.options.name = this.options.name || tilesetInfo.name;
+      this.options ??= {};
+      this.options.name = this.options.name || this.tilesetInfo.name;
 
       this.checkValueScaleLimits();
 
@@ -308,11 +312,14 @@ class TiledPixiTrack extends PixiTrack {
     });
   }
 
-  /** @param {string} error */
-  setError(error) {
-    this.errorTextText = error;
-    this.draw();
-    this.animate();
+  /**
+   * @param {string} error
+   * @param {string} source
+   */
+  setError(error, source) {
+    this.errorTexts[source] = error;
+
+    this.drawError();
   }
 
   /** @param {number | string} value */
@@ -368,12 +375,12 @@ class TiledPixiTrack extends PixiTrack {
 
     this.listeners[event].push(callback);
   }
+
   /**
    * @param {string} event The event to listen for
    * @param {function} callback The callback to call when the event occurs. The
    *  parameters for the event depend on the event called.
    */
-
   off(event, callback) {
     const id = this.listeners[event].indexOf(callback);
     if (id === -1 || id >= this.listeners[event].length) return;
@@ -431,7 +438,7 @@ class TiledPixiTrack extends PixiTrack {
   /**
    * Set which tiles are visible right now.
    *
-   * @param {Array<TilePositionArrayObject>} tilePositions
+   * @param {Array<TilePositionArrayObject>} tilePositions - A set of tiles which will be considered the currently visible tile positions.
    */
   setVisibleTiles(tilePositions) {
     this.visibleTiles = tilePositions.map((x) => ({
@@ -465,6 +472,7 @@ class TiledPixiTrack extends PixiTrack {
     if (!this.tilesetInfo) {
       return;
     }
+
     // @ts-expect-error Classes which extend TiledPixiTrack have this
     this.calculateVisibleTiles();
 
@@ -602,7 +610,7 @@ class TiledPixiTrack extends PixiTrack {
    */
   allTilesLoaded() {}
 
-  /** @param {number} _ */
+  /** @param {number} [_] - Optional value to set */
   minValue(_) {
     if (_) {
       this.scale.minValue = _;
@@ -613,7 +621,7 @@ class TiledPixiTrack extends PixiTrack {
       : this.scale.minValue;
   }
 
-  /** @param {number} _ */
+  /** @param {number} [_] - Optional value to set */
   maxValue(_) {
     if (_) {
       this.scale.maxValue = _;
@@ -638,6 +646,9 @@ class TiledPixiTrack extends PixiTrack {
 
   /** @param {Tile} tile */
   initTile(tile) {
+    if (!tile.tileData?.dense) {
+      return;
+    }
     // create the tile
     // should be overwritten by child classes
     this.scale.minRawValue = this.continuousScaling
@@ -758,6 +769,9 @@ class TiledPixiTrack extends PixiTrack {
 
   /** @param {Pick<Tile,'remoteId'>[]} toFetch */
   fetchNewTiles(toFetch) {
+    this._checkForErrors();
+    this.draw();
+
     if (toFetch.length > 0) {
       const toFetchList = [...new Set(toFetch.map((x) => x.remoteId))];
 
@@ -771,8 +785,8 @@ class TiledPixiTrack extends PixiTrack {
   /**
    * We've gotten a bunch of tiles from the server in
    * response to a request from fetchTiles.
+   * @param {Object<string, import('./data-fetchers/DataFetcher').DividedTile | Tile | TilePositionArrayObject>} loadedTiles
    */
-  /** @param {Object<string, import('./data-fetchers/DataFetcher').DividedTile | Tile | TilePositionArrayObject>} loadedTiles */
   receivedTiles(loadedTiles) {
     for (let i = 0; i < this.visibleTiles.length; i++) {
       const { tileId } = this.visibleTiles[i];
@@ -864,10 +878,28 @@ class TiledPixiTrack extends PixiTrack {
     // 1. Check if all visible tiles are loaded
     // 2. If `true` then send out event
     if (this.areAllVisibleTilesLoaded()) {
-      if (this.pubSub) {
-        this.pubSub.publish('TiledPixiTrack.tilesLoaded', { uuid: this.uuid });
-      }
+      this.pubSub?.publish('TiledPixiTrack.tilesLoaded', { uuid: this.uuid });
+    }
+  }
+
+  _checkForErrors() {
+    const errors = Object.values(this.fetchedTiles)
+      .map((x) => 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() {
@@ -877,46 +909,33 @@ class TiledPixiTrack extends PixiTrack {
       if (this.dataFetcher.tilesetInfoLoading) {
         this.trackNotFoundText.text = 'Loading...';
       } else {
-        this.trackNotFoundText.text = `Tileset info not found. Server: [${this.server}] tilesetUid: [${this.tilesetUid}]`;
+        const server = this.dataFetcher.dataConfig.server || 'unknown';
+        const tilesetUid = this.dataFetcher.dataConfig.tilesetUid;
+        this.trackNotFoundText.text = `Tileset info not found. Server: [${server}] tilesetUid: [${tilesetUid}]`;
       }
 
       [this.trackNotFoundText.x, this.trackNotFoundText.y] = this.position;
-
-      if (this.flipText) {
-        this.trackNotFoundText.anchor.x = 1;
-        this.trackNotFoundText.scale.x = -1;
-      }
+      /*
+      if (this.flipText)
+          this.trackNotFoundText.scale.x = -1;
+      */
 
       this.trackNotFoundText.visible = true;
     } else {
       this.trackNotFoundText.visible = false;
     }
 
-    if (this.pubSub) {
-      this.pubSub.publish('TiledPixiTrack.tilesDrawnStart', {
-        uuid: this.uuid,
-      });
-    }
-    const errors = Object.values(this.fetchedTiles)
-      .map((x) => x.tileData?.error && `${x.tileId}: ${x.tileData.error}`)
-      .filter((x) => x);
+    this.pubSub?.publish('TiledPixiTrack.tilesDrawnStart', { uuid: this.uuid });
 
-    if (errors.length) {
-      this.errorTextText = errors.join('\n');
-    } else {
-      this.errorTextText = '';
-    }
+    this._checkForErrors();
 
     super.draw();
 
     Object.keys(this.fetchedTiles).forEach((tilesetUid) => {
       this.drawTile(this.fetchedTiles[tilesetUid]);
     });
-    // console.log('errors:', errors);
 
-    if (this.pubSub) {
-      this.pubSub.publish('TiledPixiTrack.tilesDrawnEnd', { uuid: this.uuid });
-    }
+    this.pubSub?.publish('TiledPixiTrack.tilesDrawnEnd', { uuid: this.uuid });
   }
 
   /**
@@ -936,11 +955,7 @@ class TiledPixiTrack extends PixiTrack {
       visibleAndFetchedIds = Object.keys(this.fetchedTiles);
     }
 
-    // Get all of the dense values in the currently visible tiles
-    /** @type {number[]} */
-    let values = [];
-
-    values = values
+    const values = /** @type {Array<number>} */ ([])
       .concat(
         ...visibleAndFetchedIds
           .filter((x) => this.fetchedTiles[x].tileData.dense)
@@ -953,10 +968,7 @@ class TiledPixiTrack extends PixiTrack {
   }
 
   allVisibleValues() {
-    /** @type {number[]} */
-    const values = [];
-
-    return values.concat(
+    return /** @type {Array<number>} */ ([]).concat(
       ...this.visibleAndFetchedIds().map((x) =>
         Array.from(this.fetchedTiles[x].tileData.dense),
       ),
@@ -1007,6 +1019,7 @@ class TiledPixiTrack extends PixiTrack {
     if (visibleAndFetchedIds.length === 0) {
       visibleAndFetchedIds = Object.keys(this.fetchedTiles);
     }
+
     /** @type {number | null} */
     let max = Math.max(
       ...visibleAndFetchedIds.map(
@@ -1024,24 +1037,20 @@ class TiledPixiTrack extends PixiTrack {
     return this.valueScaleMax !== null ? this.valueScaleMax : max;
   }
 
+  /** @typedef {import('d3-scale').ScaleQuantile<number, never> & { ticks?: (count: number) => number[] }} ScaleQuantile */
+
   /**
    * Create a value scale that will be used to position values
    * along the y axis.
    * @param {number} minValue The minimum value of the data
    * @param {number} medianValue The median value of the data. Potentially used for adding a pseudocount
    * @param {number} maxValue The maximum value of the data
-   * @param {number} inMargin A number of pixels to be left free on the top and bottom
+   * @param {number} [inMargin] A number of pixels to be left free on the top and bottom
    *    of the track. For example if the glyphs have a certain
    *    width and we want all of them to fit into the space
-   * @returns
+   * @returns {[t.Scale | ScaleQuantile, number]}
    */
   makeValueScale(minValue, medianValue, maxValue, inMargin) {
-    /*
-     * Returns
-     * -------
-     *  valueScale: d3.scale
-     *      A d3 value scale
-     */
     let valueScale = null;
     let offsetValue = 0;
 
@@ -1072,13 +1081,13 @@ class TiledPixiTrack extends PixiTrack {
         // .base(Math.E)
         .domain([offsetValue, maxValue + offsetValue])
         // .domain([offsetValue, this.maxValue()])
-        .range([minDimension, maxDimension]);
+        .range([maxDimension, minDimension]);
 
       // pseudocount = offsetValue;
     } else if (this.options.valueScaling === 'quantile') {
       const start = this.dimensions[1] - margin;
       const end = margin;
-      /** @type {import('d3-scale').ScaleQuantile<number, never> & { ticks?: (count: number) => number[] }} */
+      /** @type {ScaleQuantile} */
       const quantScale = scaleQuantile()
         .domain(this.allVisibleValues())
         .range(range(start, end, (end - start) / 256));
@@ -1089,7 +1098,7 @@ class TiledPixiTrack extends PixiTrack {
       const start = this.dimensions[1] - margin;
       const end = margin;
       const s = new Set(this.allVisibleValues());
-      /** @type {import('d3-scale').ScaleQuantile<number, never> & { ticks?: (count: number) => number[] }} */
+      /** @type {ScaleQuantile} */
       const quantScale = scaleQuantile()
         .domain([...s])
         .range(range(start, end, (end - start) / 256));