higlass 1.13.0 → 1.13.1

package/app/scripts/TrackRenderer.jsx

@@ -91,6 +91,7 @@ const SCROLL_TIMEOUT = 100;
 /** @typedef {import('./types').Scale} Scale */
 /** @typedef {import('./types').TrackConfig} TrackConfig */
 /** @typedef {import('./types').TrackObject} TrackObject */
+/** @typedef {import('./types').TilesetInfo} TilesetInfo */
 
 /** @typedef {TrackRenderer["setCenter"]} SetCentersFunction */
 /** @typedef {(x: Scale, y: Scale) => [Scale, Scale]} ProjectorFunction */
@@ -104,8 +105,6 @@ const SCROLL_TIMEOUT = 100;
  * @property {number} left
  */
 
-/** @typedef {Record<string, unknown>} TilesetInfo */
-
 /**
  * @typedef MetaPluginTrackContext
  * @property {(trackId: string) => TrackObject | undefined} getTrackObject
@@ -133,7 +132,7 @@ const SCROLL_TIMEOUT = 100;
  * @property {() => void} onMouseMoveZoom
  * @property {string} chromInfoPath
  * @property {() => boolean} isShowGlobalMousePosition
- * @property {() => (string | typeof THEME_DARK)} getTheme
+ * @property {() => import('./types').Theme} getTheme
  * @property {unknown=} AVAILABLE_FOR_PLUGINS
  * @property {(HTMLDivElement | null)=} baseEl
  * @property {TrackConfig=} definition
@@ -197,7 +196,7 @@ const SCROLL_TIMEOUT = 100;
  * @property {import('pub-sub-es').PubSub} pubSub
  * @property {(func: SetCentersFunction) => void} setCentersFunction
  * @property {HTMLElement} svgElement
- * @property {string | typeof THEME_DARK} theme
+ * @property {import('./types').Theme} theme
  * @property {number} topHeight
  * @property {number} topHeightNoGallery
  * @property {{ backgroundColor?: string }} viewOptions
@@ -1856,17 +1855,15 @@ class TrackRenderer extends React.Component {
       context.projectionYDomain = track.projectionYDomain;
     }
 
-    const options = track.options;
-
     switch (track.type) {
       case 'left-axis':
-        return new LeftAxisTrack(context, options);
+        return new LeftAxisTrack(context, track.options);
 
       case 'top-axis':
-        return new TopAxisTrack(context, options);
+        return new TopAxisTrack(context, track.options);
 
       case 'heatmap':
-        return new HeatmapTiledPixiTrack(context, options);
+        return new HeatmapTiledPixiTrack(context, track.options);
 
       case 'multivec':
       case 'vector-heatmap':
@@ -1874,46 +1871,46 @@ class TrackRenderer extends React.Component {
       case 'horizontal-vector-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-multivec': // legacy, included for backwards compatiblity
       case 'vertical-vector-heatmap': // legacy, included for backwards compatiblity
-        return new HorizontalMultivecTrack(context, options);
+        return new HorizontalMultivecTrack(context, track.options);
 
       case '1d-heatmap':
       case 'horizontal-1d-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-1d-heatmap': // legacy, included for backwards compatiblity
-        return new Horizontal1dHeatmapTrack(context, options);
+        return new Horizontal1dHeatmapTrack(context, track.options);
 
       case 'line':
       case 'horizontal-line': // legacy, included for backwards compatiblity
       case 'vertical-line': // legacy, included for backwards compatiblity
-        return new HorizontalLine1DPixiTrack(context, options);
+        return new HorizontalLine1DPixiTrack(context, track.options);
 
       case 'point':
       case 'horizontal-point': // legacy, included for backwards compatiblity
       case 'vertical-point': // legacy, included for backwards compatiblity
-        return new HorizontalPoint1DPixiTrack(context, options);
+        return new HorizontalPoint1DPixiTrack(context, track.options);
 
       case 'bar':
       case 'horizontal-bar': // legacy, included for backwards compatiblity
       case 'vertical-bar': // legacy, included for backwards compatiblity
-        return new BarTrack(context, options);
+        return new BarTrack(context, track.options);
 
       case 'divergent-bar':
       case 'horizontal-divergent-bar': // legacy, included for backwards compatiblity
       case 'vertical-divergent-bar': // legacy, included for backwards compatiblity
-        return new DivergentBarTrack(context, options);
+        return new DivergentBarTrack(context, track.options);
 
       case 'horizontal-1d-tiles':
-        return new IdHorizontal1DTiledPixiTrack(context, options);
+        return new IdHorizontal1DTiledPixiTrack(context, track.options);
 
       case 'vertical-1d-tiles':
-        return new IdVertical1DTiledPixiTrack(context, options);
+        return new IdVertical1DTiledPixiTrack(context, track.options);
 
       case '2d-tiles':
-        return new Id2DTiledPixiTrack(context, options);
+        return new Id2DTiledPixiTrack(context, track.options);
 
       case 'stacked-interval':
       case 'top-stacked-interval': // legacy, included for backwards compatiblity
       case 'left-stacked-interval': // legacy, included for backwards compatiblity
-        return new CNVIntervalTrack(context, options);
+        return new CNVIntervalTrack(context, track.options);
 
       case 'viewport-projection-center':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1925,9 +1922,9 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTracker2D(context, options);
+          return new ViewportTracker2D(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'viewport-projection-horizontal':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1939,9 +1936,9 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTrackerHorizontal(context, options);
+          return new ViewportTrackerHorizontal(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'viewport-projection-vertical':
         // TODO: Fix this so that these functions are defined somewhere else
@@ -1953,37 +1950,37 @@ class TrackRenderer extends React.Component {
           context.registerViewportChanged = track.registerViewportChanged;
           context.removeViewportChanged = track.removeViewportChanged;
           context.setDomainsCallback = track.setDomainsCallback;
-          return new ViewportTrackerVertical(context, options);
+          return new ViewportTrackerVertical(context, track.options);
         }
-        return new Track(context);
+        return new Track(context, {});
 
       case 'gene-annotations':
       case 'horizontal-gene-annotations': // legacy, included for backwards compatiblity
       case 'vertical-gene-annotations': // legacy, included for backwards compatiblity
-        return new HorizontalGeneAnnotationsTrack(context, options);
+        return new HorizontalGeneAnnotationsTrack(context, track.options);
 
       case '2d-rectangle-domains':
       case 'arrowhead-domains':
-        return new ArrowheadDomainsTrack(context, options);
+        return new ArrowheadDomainsTrack(context, track.options);
 
       case 'horizontal-1d-annotations':
-        return new Annotations1dTrack(context, options);
+        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.
-        return new Annotations1dTrack(context, options, true);
+        return new Annotations1dTrack(context, track.options, true);
 
       case '2d-annotations':
-        return new Annotations2dTrack(context, options);
+        return new Annotations2dTrack(context, track.options);
 
       case 'linear-2d-rectangle-domains':
       case 'horizontal-2d-rectangle-domains': // legacy, included for backwards compatiblity
       case 'vertical-2d-rectangle-domains': // legacy, included for backwards compatiblity
-        return new Horizontal2DDomainsTrack(context, options);
+        return new Horizontal2DDomainsTrack(context, track.options);
 
       case 'square-markers':
-        return new SquareMarkersTrack(context, options);
+        return new SquareMarkersTrack(context, track.options);
 
       case 'combined':
         // @ts-expect-error - FIXME: Our typing should be able to narrow track config
@@ -1993,80 +1990,84 @@ class TrackRenderer extends React.Component {
         return new CombinedTrack(context);
 
       case '2d-chromosome-labels':
-        return new Chromosome2DLabels(context, options);
+        return new Chromosome2DLabels(context, track.options);
 
       case 'horizontal-chromosome-grid':
         context.orientation = '1d-horizontal';
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'vertical-chromosome-grid':
         context.orientation = '1d-vertical';
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case '2d-chromosome-grid':
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'chromosome-labels':
       case 'horizontal-chromosome-labels': // legacy, included for backwards compatiblity
       case 'vertical-chromosome-labels': // legacy, included for backwards compatiblity
         // chromInfoPath is passed in for backwards compatibility
         // it can be used to provide custom chromosome sizes
-        return new HorizontalChromosomeLabels(context, options);
+        return new HorizontalChromosomeLabels(context, track.options);
 
       case 'linear-heatmap':
       case 'horizontal-heatmap': // legacy, included for backwards compatiblity
       case 'vertical-heatmap': // legacy, included for backwards compatiblity
-        return new HorizontalHeatmapTrack(context, options);
+        return new HorizontalHeatmapTrack(context, track.options);
 
       case '2d-chromosome-annotations':
-        return new Chromosome2DAnnotations(context, options);
+        return new Chromosome2DAnnotations(context, track.options);
 
       case '1d-value-interval':
       case 'horizontal-1d-value-interval': // legacy, included for backwards compatiblity
       case 'vertical-1d-value-interval': // legacy, included for backwards compatiblity
-        return new ValueIntervalTrack(context, options);
+        return new ValueIntervalTrack(context, track.options);
 
       case 'osm':
       case 'osm-tiles':
-        return new OSMTilesTrack(context, options);
+        return new OSMTilesTrack(context, track.options);
 
       case 'osm-2d-tile-ids':
-        return new OSMTileIdsTrack(context, options);
+        return new OSMTileIdsTrack(context, track.options);
 
       case 'mapbox':
       case 'mapbox-tiles':
-        return new MapboxTilesTrack(context, options);
+        return new MapboxTilesTrack(context, track.options);
 
       case 'raster-tiles':
-        return new RasterTilesTrack(context, options);
+        return new RasterTilesTrack(context, track.options);
 
       case 'bedlike':
       case 'vertical-bedlike': // legacy, included for backwards compatiblity
-        return new BedLikeTrack(context, options);
+        return new BedLikeTrack(context, track.options);
 
       case 'overlay-track':
-        return new OverlayTrack(context, options);
+        return new OverlayTrack(context, track.options);
 
       case 'overlay-chromosome-grid-track':
         context.isOverlay = true;
-        return new ChromosomeGrid(context, options);
+        return new ChromosomeGrid(context, track.options);
 
       case 'horizontal-rule':
-        return new HorizontalRule(context, options);
+        return new HorizontalRule(context, track.options);
 
       case 'vertical-rule':
-        return new VerticalRule(context, options);
+        return new VerticalRule(context, track.options);
 
       case 'cross-rule':
         // This needs to be harmonized.
         context.x = track.x;
         context.y = track.y;
-        return new CrossRule(context, options);
+        return new CrossRule(context, track.options);
 
       case 'simple-svg':
-        return new SVGTrack(context, options);
-      case 'empty':
+        return new SVGTrack(context, track.options);
+      case 'empty': {
+        /** @type {import('./PixiTrack').PixiTrackOptions} */
+        // @ts-expect-error - We need a way to relate the track type and track.options.
+        const options = track.options;
         return new PixiTrack(context, options);
+      }
 
       default: {
         // Check if a plugin track is available
@@ -2091,7 +2092,7 @@ class TrackRenderer extends React.Component {
             return new pluginTrack.track( // eslint-disable-line new-cap
               this.availableForPlugins,
               context,
-              options,
+              track.options,
             );
           } catch (e) {
             console.error(

package/app/scripts/hocs/with-pub-sub.jsx

@@ -2,11 +2,13 @@ import React from 'react';
 
 import { toVoid } from '../utils';
 
+/** @type {import('pub-sub-es').PubSub & { __fake__: true }} */
 const fake = {
   __fake__: true,
   publish: toVoid,
-  subscribe: toVoid,
+  subscribe: () => ({ event: 'fake', handler: toVoid }),
   unsubscribe: toVoid,
+  clear: toVoid,
 };
 
 const { Provider, Consumer } = React.createContext(fake);

package/app/scripts/types.ts

@@ -1,5 +1,7 @@
 /* eslint-disable */
 
+import type { THEME_DARK, THEME_LIGHT } from "./configs";
+
 export type Scale = import("d3-scale").ScaleContinuousNumeric<number, number>;
 
 export type TrackPosition = typeof import('./configs/primitives').TRACK_LOCATIONS[number];
@@ -77,3 +79,27 @@ export interface TrackObject {
   movedY(extent: number): void;
   zoomedY(yPosition: number, wheelDelta: number): void;
 }
+
+export type Theme = typeof THEME_DARK | typeof THEME_LIGHT;
+
+type TilesetInfoBase = {
+  name: string;
+  coordSystem: string;
+  min_pos: number[];
+  max_pos: number[];
+  max_zoom: number;
+  tile_size?: number;
+  max_tile_width?: number;
+  transforms?: { name: string, value: string }[];
+}
+
+export type LegacyTilesetInfo = TilesetInfoBase & {
+  max_width: number;
+  bins_per_dimension?: number;
+}
+
+export type ResolutionsTilesetInfo = TilesetInfoBase & {
+  resolutions: number[];
+}
+
+export type TilesetInfo = LegacyTilesetInfo | ResolutionsTilesetInfo;

package/app/scripts/utils/type-guards.js

@@ -15,3 +15,27 @@ export function isCombinedTrackConfig(trackConfig) {
 export function isWheelEvent(event) {
   return 'deltaY' in event && 'deltaMode' in event;
 }
+
+/**
+ * @param {unknown} obj
+ * @returns {obj is {}}
+ */
+export function isObject(obj) {
+  return obj !== null && typeof obj === 'object';
+}
+
+/**
+ * @param {import('../types').TilesetInfo | undefined} info
+ * @returns {info is import('../types').LegacyTilesetInfo}
+ */
+export function isLegacyTilesetInfo(info) {
+  return isObject(info) && 'max_width' in info;
+}
+
+/**
+ * @param {import('../types').TilesetInfo | undefined} info
+ * @returns {info is import('../types').ResolutionsTilesetInfo}
+ */
+export function isResolutionsTilesetInfo(info) {
+  return isObject(info) && 'resolutions' in info;
+}

package/dist/esm.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>HiGlass</title>
+    <style type="text/css">
+      #demo {
+        position: absolute;
+        left: 1rem;
+        top: 1rem;
+        bottom: 1rem;
+        right: 1rem;
+        overflow: hidden;
+      }
+    </style>
+          <link rel="stylesheet" href="./hglib.css">
+      <script type="importmap">
+        {
+          "imports": {
+            "react": "https://esm.sh/react@17",
+            "react-dom": "https://esm.sh/react-dom@17",
+            "pixi.js": "https://esm.sh/pixi.js@6"
+          }
+        }
+      </script>
+      <script type="module">
+        import * as hglib from "./higlass.mjs";
+        globalThis.hglib = hglib;
+      </script>
+    
+  </head>
+
+  <body>
+    <div id="demo"></div>
+  </body>
+
+  <script type="module">
+    const viewConfig = {
+      zoomFixed: false,
+      views: [
+        {
+          layout: {
+            w: 12,
+            h: 7,
+            x: 0,
+            y: 0
+          },
+          uid: 'aa',
+          initialYDomain: [
+            2534823997.9776945,
+            2547598956.834603
+          ],
+          initialXDomain: [
+            2521015726.4619913,
+            2558682921.8435397
+          ],
+          tracks: {
+            left: [],
+            top: [
+              {
+                uid: 'genes',
+                tilesetUid: 'OHJakQICQD6gTD7skx4EWA',
+                server: 'http://higlass.io/api/v1',
+                type: 'horizontal-gene-annotations',
+                height: 48,
+                options: {
+                  labelColor: 'black',
+                  plusStrandColor: 'black',
+                  labelPosition: 'hidden',
+                  minusStrandColor: 'black',
+                  fontSize: 11,
+                  trackBorderWidth: 0,
+                  trackBorderColor: 'black',
+                  showMousePosition: true,
+                  mousePositionColor: '#000000',
+                  geneAnnotationHeight: 10,
+                  geneLabelPosition: 'outside',
+                  geneStrandSpacing: 4
+                },
+              },
+              {
+                uid: 'line1',
+                tilesetUid: 'PjIJKXGbSNCalUZO21e_HQ',
+                height: 20,
+                server: 'http://higlass.io/api/v1',
+                type: 'horizontal-line',
+                options: {
+                  valueScaling: 'linear',
+                  lineStrokeWidth: 2,
+                  lineStrokeColor: '#4a35fc',
+                  labelPosition: 'topLeft',
+                  labelColor: 'black',
+                  axisPositionHorizontal: 'right',
+                  trackBorderWidth: 0,
+                  trackBorderColor: 'black',
+                  labelTextOpacity: 0.4,
+                  showMousePosition: true,
+                  mousePositionColor: '#000000',
+                  showTooltip: false
+                }
+              },
+              {
+                uid: 'line2',
+                tilesetUid: 'PdAaSdibTLK34hCw7ubqKA',
+                height: 20,
+                server: 'http://higlass.io/api/v1',
+                type: 'horizontal-line',
+                options: {
+                  valueScaling: 'linear',
+                  lineStrokeWidth: 2,
+                  lineStrokeColor: '#d104fa',
+                  labelPosition: 'topLeft',
+                  labelColor: 'black',
+                  axisPositionHorizontal: 'right',
+                  trackBorderWidth: 0,
+                  trackBorderColor: 'black',
+                  labelTextOpacity: 0.4,
+                  showMousePosition: true,
+                  mousePositionColor: '#000000',
+                  showTooltip: false
+                },
+              },
+              {
+                uid: 'line3',
+                tilesetUid: 'e0DYtZBSTqiMLHoaimsSpg',
+                height: 20,
+                server: 'http://higlass.io/api/v1',
+                type: 'horizontal-line',
+                options: {
+                  valueScaling: 'linear',
+                  lineStrokeWidth: 2,
+                  lineStrokeColor: '#ff0000',
+                  labelPosition: 'topLeft',
+                  labelColor: 'black',
+                  axisPositionHorizontal: 'right',
+                  trackBorderWidth: 0,
+                  trackBorderColor: 'black',
+                  labelTextOpacity: 0.4,
+                  showMousePosition: true,
+                  mousePositionColor: '#000000',
+                  showTooltip: false
+                },
+              },
+              {
+                uid: 'line4',
+                tilesetUid: 'cE0nGyd0Q_yVYSyBUe89Ww',
+                height: 20,
+                server: 'http://higlass.io/api/v1',
+                type: 'horizontal-line',
+                options: {
+                  valueScaling: 'linear',
+                  lineStrokeWidth: 2,
+                  lineStrokeColor: 'orange',
+                  labelPosition: 'topLeft',
+                  labelColor: 'black',
+                  axisPositionHorizontal: 'right',
+                  trackBorderWidth: 0,
+                  trackBorderColor: 'black',
+                  labelTextOpacity: 0.4,
+                  showMousePosition: true,
+                  mousePositionColor: '#000000',
+                  showTooltip: false
+                },
+              },
+              {
+                uid: 'chroms',
+                height: 18,
+                chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
+                type: 'horizontal-chromosome-labels',
+                options: {
+                  color: '#777777',
+                  stroke: '#FFFFFF',
+                  fontSize: 11,
+                  fontIsLeftAligned: true,
+                  showMousePosition: true,
+                  mousePositionColor: '#000000'
+                },
+              }
+            ],
+            right: [],
+            center: [
+              {
+                uid: 'center',
+                type: 'combined',
+                contents: [
+                  {
+                    server: 'http://higlass.io/api/v1',
+                    tilesetUid: 'dVBREuC2SvO01uXYMUh2aQ',
+                    type: 'heatmap',
+                    uid: 'Yqetzqw6Qfy-hREAJhAXEA',
+                    options: {
+                      backgroundColor: '#eeeeee',
+                      labelPosition: 'topLeft',
+                      labelTextOpacity: 0.4,
+                      colorRange: [
+                        'white',
+                        'rgba(245,166,35,1.0)',
+                        'rgba(208,2,27,1.0)',
+                        'black'
+                      ],
+                      maxZoom: null,
+                      colorbarPosition: 'topRight',
+                      trackBorderWidth: 0,
+                      trackBorderColor: 'black',
+                      heatmapValueScaling: 'log',
+                      showMousePosition: true,
+                      mousePositionColor: '#000000',
+                      showTooltip: true,
+                      scaleStartPercent: '0.00000',
+                      scaleEndPercent: '1.00000',
+                      showMousePositionGlobally: true,
+                    },
+                  }
+                ],
+              }
+            ],
+            bottom: [],
+            whole: [],
+            gallery: []
+          },
+          chromInfoPath: '//s3.amazonaws.com/pkerp/data/hg19/chromSizes.tsv',
+          genomePositionSearchBox: {
+            visible: true,
+            chromInfoServer: 'http://higlass.io/api/v1',
+            chromInfoId: 'hg19',
+            autocompleteServer: 'http://higlass.io/api/v1',
+            autocompleteId: 'OHJakQICQD6gTD7skx4EWA'
+          }
+        }
+      ],
+      editable: true,
+      viewEditable: true,
+      tracksEditable: true,
+      exportViewUrl: '/api/v1/viewconfs',
+      zoomLocks: {
+        locksByViewUid: {},
+        locksDict: {}
+      },
+      trackSourceServers: [
+        'http://higlass.io/api/v1'
+      ],
+      locationLocks: {
+        locksByViewUid: {
+          aa: 'PkNgAl3mSIqttnSsCewngw',
+          ewZvJwlDSei_dbpIAkGMlg: 'PkNgAl3mSIqttnSsCewngw'
+        },
+        locksDict: {
+          PkNgAl3mSIqttnSsCewngw: {
+            aa: [
+              1550000000,
+              1550000000,
+              3380588.876772046
+            ],
+            ewZvJwlDSei_dbpIAkGMlg: [
+              1550000000.0000002,
+              1549999999.9999993,
+              3380588.876772046
+            ],
+            uid: 'PkNgAl3mSIqttnSsCewngw'
+          }
+        }
+      },
+      valueScaleLocks: {
+        locksByViewUid: {},
+        locksDict: {}
+      }
+    };
+
+    const hgApi = window.hgApi = hglib.viewer(
+      document.getElementById('demo'),
+      viewConfig,
+      { bounded: true },
+    );
+
+    hgApi.setBroadcastMousePositionGlobally(true);
+
+    hgApi.on('viewConfig', () => {
+      console.log('View Config changed');
+    });
+
+  </script>
+</html>