higlass 1.13.6 → 2.0.1

package/app/scripts/TrackRenderer.jsx

@@ -444,6 +444,7 @@ export class TrackRenderer extends React.Component {
       throw new Error('Component did not mount, this.element is not defined.');
     }
     this.elementPos = this.element.getBoundingClientRect();
+
     this.elementSelection = select(this.element);
 
     /** @type {import('pixi.js').Graphics} */
@@ -1961,9 +1962,8 @@ export class TrackRenderer extends React.Component {
       case 'arrowhead-domains':
         return new ArrowheadDomainsTrack(context, track.options);
 
+      case '1d-annotations':
       case 'horizontal-1d-annotations':
-        return new Annotations1dTrack(context, track.options);
-
       case 'vertical-1d-annotations':
         // Fix this: LeftTrackModifier is doing a whole bunch of things not
         // needed by this track but the current setup is not consistent.

package/app/scripts/ViewContextMenu.jsx

@@ -1,17 +1,20 @@
 // @ts-nocheck
 import clsx from 'clsx';
+import { format } from 'd3-format';
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { mix } from './mixwith';
 
 import { getSeriesItems } from './SeriesListItems';
-import { expandCombinedTracks } from './utils';
+import { absToChr, expandCombinedTracks } from './utils';
+import copyTextToClipboard from './utils/copy-text-to-clipboard';
 
 import ContextMenuContainer from './ContextMenuContainer';
 import ContextMenuItem from './ContextMenuItem';
 import SeriesListSubmenuMixin from './SeriesListSubmenuMixin';
 
-import { THEME_DARK } from './configs';
+import { THEME_DARK } from './configs/themes';
 
 // Styles
 import classes from '../styles/ContextMenu.module.scss';
@@ -58,6 +61,17 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
 
         {seriesItems && <hr className={classes['context-menu-hr']} />}
 
+        {this.props.genomePositionSearchBox && (
+          <ContextMenuItem
+            onClick={this.copyLocationToClipboard.bind(this)}
+            onMouseEnter={(e) => this.handleOtherMouseEnter(e)}
+          >
+            Copy location under cursor
+          </ContextMenuItem>
+        )}
+
+        <hr className={classes['context-menu-hr']} />
+
         <ContextMenuItem
           onClick={() =>
             this.props.onAddTrack({
@@ -155,6 +169,40 @@ class ViewContextMenu extends mix(ContextMenuContainer).with(
     });
   }
 
+  copyLocationToClipboard() {
+    const is2d =
+      this.props.tracks[0] && this.props.tracks[0].position === 'center';
+
+    const chromInfo =
+      this.props.genomePositionSearchBox?.searchField?.chromInfo;
+
+    if (!chromInfo) {
+      console.warn(
+        'There needs to be a genome position search box present to copy the location',
+      );
+      this.props.closeMenu();
+      return;
+    }
+
+    const xAbsCoord = this.props.coords[0];
+    const yAbsCoord = this.props.coords[1];
+
+    const xChr = absToChr(xAbsCoord, chromInfo);
+    const stringFormat = format(',d');
+
+    let locationText = `${xChr[0]}:${stringFormat(xChr[1])}`;
+
+    if (is2d) {
+      const yChr = absToChr(yAbsCoord, chromInfo);
+      locationText = `${locationText} & ${yChr[0]}:${stringFormat(yChr[1])}`;
+      copyTextToClipboard(locationText);
+    } else {
+      copyTextToClipboard(locationText);
+    }
+
+    this.props.closeMenu();
+  }
+
   handleAddVerticalSection() {
     const trackList = expandCombinedTracks(this.props.tracks);
     const matrixTrack = trackList.filter(

package/app/scripts/ViewHeader.jsx

@@ -80,8 +80,8 @@ class ViewHeader extends React.Component {
    *
    * We just need to close the menu here.
    */
-  handleTrackPositionChosen(position) {
-    this.props.onTrackPositionChosen(position);
+  handleTrackPositionChosen(position, extent) {
+    this.props.onTrackPositionChosen(position, extent);
 
     this.setState({
       addTrackPositionMenuUid: null,
@@ -287,6 +287,7 @@ class ViewHeader extends React.Component {
             onClick={() =>
               this.handleAddTrackPositionMenuOpened(this.props.viewUid)
             }
+            data-testid="add-track"
           >
             <title>Add Track</title>
             <use xlinkHref="#plus" />

package/app/scripts/api.js

@@ -5,18 +5,28 @@ import ReactDOM from 'react-dom';
 
 import schema from '../schema.json';
 
-import { setTileProxyAuthHeader } from './services';
+import { getTileProxyAuthHeader, setTileProxyAuthHeader } from './services';
 
 import { getTrackObjectFromHGC } from './utils';
 
-import { MOUSE_TOOL_MOVE, MOUSE_TOOL_SELECT } from './configs';
-
 import { version } from '../../package.json';
+import {
+  MOUSE_TOOL_MOVE,
+  MOUSE_TOOL_SELECT,
+  MOUSE_TOOL_TRACK_SELECT,
+  SIZE_MODE_BOUNDED,
+  SIZE_MODE_BOUNDED_OVERFLOW,
+  SIZE_MODE_DEFAULT,
+  SIZE_MODE_OVERFLOW,
+  SIZE_MODE_SCROLL,
+} from './configs';
 
 const forceUpdate = (self) => {
   self.setState(self.state);
 };
 
+/** @typedef {ReturnType<typeof createApi>} HiGlassApi */
+
 const createApi = function api(context, pubSub) {
   /** @type {import('./HiGlassComponent').default} */
   const self = context;
@@ -100,7 +110,7 @@ const createApi = function api(context, pubSub) {
        * Get the currently set auth header
        */
       getAuthHeader() {
-        return setTileProxyAuthHeader();
+        return getTileProxyAuthHeader();
       },
 
       /**
@@ -152,7 +162,9 @@ const createApi = function api(context, pubSub) {
        */
       destroy() {
         destroy();
-        ReactDOM.unmountComponentAtNode(self.topDiv.parentNode);
+        if (self.topDivRef.current) {
+          ReactDOM.unmountComponentAtNode(self.topDivRef.current);
+        }
       },
 
       /**
@@ -367,6 +379,16 @@ const createApi = function api(context, pubSub) {
         });
       },
 
+      measureSize() {
+        self.measureSize();
+
+        for (const tiledPlot of Object.values(self.tiledPlots)) {
+          if (tiledPlot) {
+            tiledPlot.measureSize();
+          }
+        }
+      },
+
       /**
        * Show the track chooser which highlights tracks
        * when the mouse is over them.
@@ -587,6 +609,10 @@ const createApi = function api(context, pubSub) {
        */
       activateTool(tool) {
         switch (tool) {
+          case 'track-select':
+            self.setMouseTool(MOUSE_TOOL_TRACK_SELECT);
+            break;
+
           case 'select':
             self.setMouseTool(MOUSE_TOOL_SELECT);
             break;
@@ -597,6 +623,33 @@ const createApi = function api(context, pubSub) {
         }
       },
 
+      /**
+       * Set the size mode for the higlass container
+       *
+       * @param {string sizeMode The size mode for the container.
+       *                         The vailable options are 'default',
+       *                         'bounded', 'overflow' and 'scroll'
+       */
+      setSizeMode(sizeMode) {
+        switch (sizeMode) {
+          case 'bounded':
+            self.setSizeMode(SIZE_MODE_BOUNDED);
+            break;
+          case 'overflow':
+            self.setSizeMode(SIZE_MODE_OVERFLOW);
+            break;
+          case 'bounded-overflow':
+            self.setSizeMode(SIZE_MODE_BOUNDED_OVERFLOW);
+            break;
+          case 'scroll':
+            self.setSizeMode(SIZE_MODE_SCROLL);
+            break;
+          default:
+            self.setSizeMode(SIZE_MODE_DEFAULT);
+            break;
+        }
+      },
+
       /**
        * Get a Promise which returns a Blob containing a PNG for the current view.
        * It's possible to get string of the PNG bytes from that:
@@ -742,6 +795,18 @@ const createApi = function api(context, pubSub) {
           typeof listenerId === 'object' ? listenerId.callback : listenerId;
 
         switch (event) {
+          case 'annotationCreated':
+            apiPubSub.unsubscribe('annotationCreated', callback);
+            break;
+
+          case 'annotationChanged':
+            apiPubSub.unsubscribe('annotationChanged', callback);
+            break;
+
+          case 'annotationRemoved':
+            apiPubSub.unsubscribe('annotationRemoved', callback);
+            break;
+
           case 'click':
             apiPubSub.unsubscribe('click', callback);
             break;
@@ -750,6 +815,10 @@ const createApi = function api(context, pubSub) {
             apiPubSub.unsubscribe('cursorLocation', callback);
             break;
 
+          case 'datasetInfo':
+            apiPubSub.unsubscribe('datasetInfo', callback);
+            break;
+
           case 'location':
             self.offLocationChange(viewId, listenerId);
             break;
@@ -797,7 +866,7 @@ const createApi = function api(context, pubSub) {
        *
        * **Event types**
        *
-       * ``click``: Returns a list of objects for each track that is below the click event.
+       * ``click``: Returns clicked objects. (Currently only clicks on 1D annotations are captured.)
        *
        * .. code-block:: javascript
        *
@@ -966,12 +1035,24 @@ const createApi = function api(context, pubSub) {
        */
       on(event, callback, viewId, callbackId) {
         switch (event) {
+          case 'annotationCreated':
+            return apiPubSub.subscribe('annotationCreated', callback);
+
+          case 'annotationChanged':
+            return apiPubSub.subscribe('annotationChanged', callback);
+
+          case 'annotationRemoved':
+            return apiPubSub.subscribe('annotationRemoved', callback);
+
           case 'click':
             return apiPubSub.subscribe('click', callback);
 
           case 'cursorLocation':
             return apiPubSub.subscribe('cursorLocation', callback);
 
+          case 'datasetInfo':
+            return apiPubSub.subscribe('datasetInfo', callback);
+
           case 'location':
             // returns a set of scales (xScale, yScale) on every zoom event
             return self.onLocationChange(viewId, callback, callbackId);

package/app/scripts/configs/index.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* ------------------------------- Primitives ------------------------------- */
 
 export * from './primitives';
@@ -21,3 +20,9 @@ export {
   NUM_PRECOMP_SUBSETS_PER_1D_TTILE,
   NUM_PRECOMP_SUBSETS_PER_2D_TTILE,
 } from './dense-data-extrema-config';
+
+export const SIZE_MODE_DEFAULT = 'default';
+export const SIZE_MODE_BOUNDED = 'bounded';
+export const SIZE_MODE_OVERFLOW = 'overflow';
+export const SIZE_MODE_BOUNDED_OVERFLOW = 'bounded-overflow';
+export const SIZE_MODE_SCROLL = 'scroll';

package/app/scripts/configs/primitives.js

@@ -12,6 +12,8 @@ export const MOUSE_TOOL_MOVE = 'move';
 
 export const MOUSE_TOOL_SELECT = 'select';
 
+export const MOUSE_TOOL_TRACK_SELECT = 'track-select';
+
 export const TILE_FETCH_DEBOUNCE = 100;
 
 // Number of milliseconds zoom-related actions (e.g., tile loading) are debounced

package/app/scripts/configs/tracks-info.js

@@ -34,6 +34,7 @@ import {
  * @property {number=} defaultWidth
  * @property {string=} chromInfoPath
  * @property {boolean=} projection
+ * @property {Record<string, unknown>} [optionsInfo]
  */
 
 const osm = {

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

@@ -1,7 +1,8 @@
 import genbankParser from 'genbank-parser';
-import pako from 'pako';
 import slugid from 'slugid';
 
+import decompress from '../utils/decompress';
+
 /** @import { AbstractDataFetcher } from '../types' */
 /** @typedef {{ start: number, end: number, type: 'filler', strand: "+" | "-" }} FillerSegment */
 
@@ -201,18 +202,6 @@ function gbToJsonAndFeatures(gbText) {
   return { json: gbJson, features };
 }
 
-/**
- * Extract the response from a fetch request
- * @param {Response} response
- * @param {{ gzipped: boolean }} options
- * @returns {Promise<string>}
- */
-async function extractResponse(response, { gzipped }) {
-  if (!gzipped) return response.text();
-  const buffer = await response.arrayBuffer();
-  return pako.inflate(buffer, { to: 'string' });
-}
-
 /**
  * @typedef GenbankDataConfig
  * @prop {string=} url
@@ -243,7 +232,13 @@ class GBKDataFetcher {
         mode: 'cors',
         redirect: 'follow',
         method: 'GET',
-      }).then((r) => extractResponse(r, { gzipped: extension === '.gz' }));
+      }).then((originalResponse) => {
+        const normalizedResponse =
+          extension === '.gz'
+            ? decompress(originalResponse, { format: 'gzip' })
+            : originalResponse;
+        return normalizedResponse.text();
+      });
     } else if (dataConfig.text) {
       textPromise = Promise.resolve(dataConfig.text);
     } else {

package/app/scripts/data-fetchers/local-tile-fetcher.js

@@ -3,7 +3,7 @@ import { tileResponseToData } from '../services';
 /** @import { AbstractDataFetcher, TilesetInfo } from '../types' */
 
 // TODO: Add type for LocalTile
-/** @typedef {{}} LocalTile */
+/** @typedef {{tilePositionId?: string}} LocalTile */
 
 /**
  * @typedef LocalTileDataConfig
@@ -28,7 +28,12 @@ class LocalTileDataFetcher {
   /** @param {import('../types').HandleTilesetInfoFinished} callback */
   async tilesetInfo(callback) {
     this.tilesetInfoLoading = false;
-    callback(this.tilesetInfoData);
+    await new Promise((resolve) =>
+      setTimeout(() => {
+        callback(this.tilesetInfoData);
+        resolve(true);
+      }, 0),
+    );
     return this.tilesetInfoData;
   }
 
@@ -57,6 +62,7 @@ class LocalTileDataFetcher {
 
     for (const tileId of tileIds) {
       ret[tileId] = this.tilesData[`localtile.${tileId}`];
+      ret[tileId].tilePositionId = tileId;
     }
     receivedTiles(ret);
     return ret;

package/app/scripts/hglib.jsx

@@ -1,11 +1,9 @@
-// @ts-nocheck
 import React from 'react';
 import ReactDOM from 'react-dom';
 import HiGlassComponent from './HiGlassComponent';
 
 import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
-// these exports can be used to create new tracks in outside
-// environments (e.g. Observable)
+// these exports can be used to create new tracks in outside environments (e.g. Observable)
 import SVGTrack from './SVGTrack';
 import TiledPixiTrack from './TiledPixiTrack';
 
@@ -22,7 +20,15 @@ export const tracks = {
   HorizontalGeneAnnotationsTrack,
 };
 
-export { default as schema } from '../schema.json';
+export { default as schema } from '../schema.json' with { type: 'json' };
+export { version } from '../../package.json' with { type: 'json' };
+
+/** @import * as api from './api' */
+/** @import * as types from './types' */
+
+/** @typedef {api.HiGlassApi["public"]} HiGlassApi */
+/** @typedef {types.HiGlassOptions} HiGlassOptions */
+/** @typedef {types.HiGlassViewConfig} HiGlassViewConfig */
 
 // export functions that are useful for testing
 export {
@@ -32,86 +38,71 @@ export {
   mountHGComponent,
 } from './test-helpers';
 
-export { getTrackObjectFromHGC } from './utils';
-
-export { version } from '../../package.json';
+export {
+  debounce,
+  getDefaultTracksForDatatype,
+  getTrackByUid,
+  getTrackObjectFromHGC,
+} from './utils';
 
-const launch = (element, config, options) => {
-  /**
-   * The instance's public API will be passed into the callback
-   *
-   * @param {DOMElement} element The element to attach the HiGlass component to
-   *  E.g. ``document.getElementById('two-heatmaps')``
-   *
-   * @param {Object} config The viewconfig to load. If this parameter is a string
-   * it will be interpreted as a url from which to retrieve the viewconf.
-   *
-   * @param {Object} options Options that affect how the component is drawn and
-   * and behaves.
-   *
-   * @return  {Object} The instance's public API
-   */
-  const ref = React.createRef();
-  ReactDOM.render(
-    <HiGlassComponent ref={ref} options={options || {}} viewConfig={config} />,
-    element,
-  );
-  return ref.current;
+export { TRACKS_INFO_BY_TYPE } from './configs';
+export { OPTIONS_INFO } from './options-info';
+/**
+ * Create a `HiGlassComponent` instance.
+ *
+ * @param {HTMLElement} element - The element to attach the HiGlassComponent.
+ * @param {HiGlassViewConfig} config - The view configuration.
+ * @param {HiGlassOptions} [options] - How the component is drawn and and behaves.
+ *
+ * @returns {Promise<HiGlassComponent>}
+ */
+const launch = async (element, config, options = {}) => {
+  return new Promise((resolve) => {
+    ReactDOM.render(
+      <HiGlassComponent
+        ref={(/** @type {HiGlassComponent | null} */ ref) => {
+          // Wait to resolve until React gives us a ref
+          ref && resolve(ref);
+        }}
+        options={options}
+        viewConfig={config}
+      />,
+      element,
+    );
+  });
 };
 
 /**
  * Create a HiGlass component.
  *
- * In addition to the parameters below, a number of extra options can be passed
- * using the **options** parameter:
+ * @param {HTMLElement} element - DOM element to render the HiGlass component.
+ * @param {HiGlassViewConfig | string} viewConfig - The view config to load.
+ * @param {HiGlassOptions} [options] - Additional options for how the HiGlass component is drawn and behaves
+ * @returns  {Promise<HiGlassApi>}  Newly created HiGlass component.
  *
- * * **authToken** *(string)* - An auth token to be included with every tile request
-  (e.g. ``JWT xyz``)
- * * **bounded** *(bool)* - A boolean specifying whether the component should be sized
-  to fit within the enclosing div [default=false]. If it is false, then the component
-  will grow as needed to fit the tracks within it.
- * * **editable** *(bool)* - Can the layout be changed? If false, the view headers will
-  be hidden. This can also be specified in the viewconfig using the ``editable`` option.
-  The value passed here overrides the value in the viewconf. [default=true]
- * * **defaultTrackOptions** *(dict)* - Specify a set of default options that will be used for
- *  newly added tracks. These can be broken down into two types: `all` - affecting all
- *  all track types and `trackSpecific` which will affect only some track types. See the
- *  example below for a concrete demonstration.
- * @param  {Object}  element  DOM element the HiGlass component should be
- *   attached to.
- * @param  {Object|String}  viewConfig  The viewconfig to load. If this parameter is a string
- * it will be interpreted as a url from which to retrieve the viewconf. If it is a dictionary
- * it will be loaded as is.
- * @param  {Object}  options  Dictionary of public options. See the description above for a list
-   of available values.
- * @example
+ * Note: If `viewConfig` is a string, it will be interpreted as a url from which to retrieve the viewconf.
  *
- * const hgv = hglib.viewer(
- *  document.getElementById('development-demo'),
- *  testViewConfig,
- *  { bounded: true,
+ * @example
+ * ```js
+ * const hgv = hglib.viewer(document.querySelector('#app'), viewconf, {
+ *   bounded: true,
  *   defaultTrackOptions: {
- *     all: {
- *       showTooltip: true,
- *     },
+ *     all: { showTooltip: true },
  *     trackSpecific: {
- *      'heatmap': {
- *        showTooltip: false,
- *      }
+ *       heatmap: { showTooltip: false }
  *     }
  *   }
  * });
- *
- * @return  {Object}  Newly created HiGlass component.
+ * ```
  */
-export const viewer = (element, viewConfig, options) => {
-  /**
-   * Available options:
-   *
-   *  bounded: [true/false]
-   *      Fit the container to the bounds of the element
-   */
-  const hg = launch(element, viewConfig, options);
+export const viewer = async (element, viewConfig, options = {}) => {
+  const hg = await launch(
+    element,
+    typeof viewConfig === 'string'
+      ? await fetch(viewConfig).then((response) => response.json())
+      : viewConfig,
+    options,
+  );
   return hg.api;
 };