higlass 1.13.5 → 2.0.0

package/app/scripts/hglib.jsx

@@ -1,13 +1,11 @@
-// @ts-nocheck
 import React from 'react';
 import ReactDOM from 'react-dom';
 import HiGlassComponent from './HiGlassComponent';
 
-// these exports can be used to create new tracks in outside
-// environments (e.g. Observable)
+import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
+// these exports can be used to create new tracks in outside environments (e.g. Observable)
 import SVGTrack from './SVGTrack';
 import TiledPixiTrack from './TiledPixiTrack';
-import HorizontalGeneAnnotationsTrack from './HorizontalGeneAnnotationsTrack';
 
 export { default as ChromosomeInfo } from './ChromosomeInfo';
 export { default as HiGlassComponent } from './HiGlassComponent';
@@ -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;
 };
 

package/app/scripts/hocs/with-modal.jsx

@@ -1,21 +1,43 @@
-// @ts-nocheck
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
-import { toVoid } from '../utils';
+import toVoid from '../utils/to-void';
 
 const { Provider, Consumer } = React.createContext({
   close: toVoid,
   open: toVoid,
 });
 
-// Higher order component
-const withModal = (Component) =>
-  React.forwardRef((props, ref) => (
-    <Consumer>
-      {(modal) => <Component ref={ref} {...props} modal={modal} />}
-    </Consumer>
-  ));
+// Trevor: Not sure how to type these HOCs correctly.
+//
+// We want the wrapped component to retain the same instance API while
+// eliminating the need to pass `modal` explicitly.
+//
+// Ideally, we'd use Higher Kinded Types (HKT), but since TypeScript lacks them,
+// we preserve the original type instead.
+//
+// This may cause instantiation errors (e.g., TS complaining about a missing `modal`),
+// but I think this is acceptable because:
+//
+// 1. It only affects instantiation (we can ignore the error in one place).
+// 2. We control instantiation, so this won't impact external consumers.
+// 3. Explicitly passing the new props would erase type information for the rest of the API,
+//    reducing type safety everywhere else.
+
+/** @typedef {{ open: () => void, close: () => void }} Modal  */
+
+/**
+ * @template {typeof React.Component<{ modal?: Modal }>} T
+ * @param {T} Component
+ * @returns {T}
+ */
+function withModal(Component) {
+  // @ts-expect-error See comment above
+  return React.forwardRef((props, ref) =>
+    React.createElement(Consumer, null, (/** @type {Modal} */ modal) =>
+      React.createElement(Component, { ref, ...props, modal }),
+    ),
+  );
+}
 
 export default withModal;
 

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

@@ -1,14 +1,23 @@
-// @ts-nocheck
 import React from 'react';
 
 import fakePubSub from '../utils/fake-pub-sub';
 
 const { Provider, Consumer } = React.createContext(fakePubSub);
 
-// Written without JSX to make it so we don't need JSX-transformation to load this file
+// Trevor: Not sure how to type these HOCs correctly.
+// This is a workaround. See ./with-modal for more information.
+
+/** @import { PubSub } from 'pub-sub-es' */
+
+/**
+ * @template {typeof React.Component<{ pubSub?: PubSub }>} T
+ * @param {T} Component
+ * @returns {T}
+ */
 function withPubSub(Component) {
+  // @ts-expect-error See comment in ./with-modal
   return React.forwardRef((props, ref) =>
-    React.createElement(Consumer, null, (pubSub) =>
+    React.createElement(Consumer, null, (/** @type {PubSub} */ pubSub) =>
       React.createElement(Component, { ref, ...props, pubSub }),
     ),
   );

package/app/scripts/hocs/with-theme.jsx

@@ -1,21 +1,28 @@
-// @ts-nocheck
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
+import * as themes from '../configs/themes';
 
-import { toVoid } from '../utils';
+/** @typedef {themes.THEME_LIGHT | themes.THEME_DARK} Theme */
 
-const { Provider, Consumer } = React.createContext({
-  close: toVoid,
-  open: toVoid,
-});
+const { Provider, Consumer } = React.createContext(
+  /** @type {Theme} */ (themes.THEME_DEFAULT),
+);
 
-// Higher order component
-const withTheme = (Component) =>
-  React.forwardRef((props, ref) => (
-    <Consumer>
-      {(theme) => <Component ref={ref} {...props} theme={theme} />}
-    </Consumer>
-  ));
+// Trevor: Not sure how to type these HOCs correctly.
+// This is a workaround. See ./with-modal for more information.
+
+/**
+ * @template {typeof React.Component<{ theme?: Theme }>} T
+ * @param {T} Component
+ * @returns {T}
+ */
+function withTheme(Component) {
+  // @ts-expect-error See comment in ./with-modal
+  return React.forwardRef((props, ref) =>
+    React.createElement(Consumer, null, (/** @type {Theme} */ theme) =>
+      React.createElement(Component, { ref, ...props, theme }),
+    ),
+  );
+}
 
 export default withTheme;
 

package/app/scripts/icons.jsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React from 'react';
-import PropTypes from 'prop-types';
 import { select } from 'd3-selection';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classes from '../styles/ViewHeader.module.scss';
 
 export const COG = {
@@ -392,6 +392,7 @@ export function SearchIcon({ theStyle, onClick }) {
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>Search</title>
       <g fill="none" stroke="#6c6c6c" strokeWidth="2">
         <path d="M11.29 11.71l-4-4" />
         <circle cx="5" cy="5" r="4" />

package/app/scripts/mixwith.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-/* eslint-disable max-classes-per-file */
 
 // used by apply() and isApplicationOf()
 const _appliedMixin = '__mixwith_appliedMixin';
@@ -76,6 +75,7 @@ export const apply = (superclass, mixin) => {
  * `mixin` to a superclass
  */
 export const isApplicationOf = (proto, mixin) =>
+  // biome-ignore lint/suspicious/noPrototypeBuiltins:
   proto.hasOwnProperty(_appliedMixin) && proto[_appliedMixin] === unwrap(mixin);
 
 /**
@@ -179,7 +179,7 @@ export const DeDupe = (mixin) =>
  * @return {MixinFunction} the given mixin function
  */
 export const HasInstance = (mixin) => {
-  if (Symbol && Symbol.hasInstance && !mixin[Symbol.hasInstance]) {
+  if (Symbol?.hasInstance && !mixin[Symbol.hasInstance]) {
     Object.defineProperty(mixin, Symbol.hasInstance, {
       value(o) {
         return hasMixin(o, mixin);

package/app/scripts/options-info.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-// A better position of this file would be under \configs,
-// but this file imports HeatmapOptions that contains React
-// components, so having this file near track implementations
-
 import { formatPrefix, precisionPrefix } from 'd3-format';
 
 import HeatmapOptions from './HeatmapOptions';
@@ -52,7 +48,7 @@ const SPECIAL_COLORS = {
   use_stroke: { name: 'Glyph color', value: '[glyph-color]' },
 };
 
-const AVAILABLE_WIDTHS = sizesInPx([1, 2, 3, 5, 8, 13, 21]);
+const AVAILABLE_WIDTHS = sizesInPx([0, 1, 2, 3, 5, 8, 13, 21]);
 const AVAILABLE_WIDTHS_AND_NONE = Object.assign(AVAILABLE_WIDTHS, {
   none: { name: 'none', value: 'none' },
 });
@@ -64,7 +60,7 @@ const OPACITY_OPTIONS_NO_ZERO = sizesInPx([0.2, 0.4, 0.6, 0.8, 1.0], '%', 100);
 
 // these values define the options that are visible in the track config
 // menu
-const OPTIONS_INFO = {
+export const OPTIONS_INFO = {
   axisLabelFormatting: {
     name: 'Axis Label Formatting',
     inlineOptions: {
@@ -136,9 +132,34 @@ const OPTIONS_INFO = {
     name: 'Stroke Width',
     inlineOptions: AVAILABLE_WIDTHS,
   },
-  strokeWidth: {
+  strokeSingleSeries: {
+    name: 'Draw single series',
+    generateOptions: (track) => {
+      const inlineOptions = [];
+
+      if (track.row_infos) {
+        for (let i = 0; i < track.row_infos.length; i++) {
+          inlineOptions.push({
+            name: i + 1,
+            value: i + 1,
+          });
+        }
+      }
+
+      inlineOptions.push({
+        name: 'All',
+        value: 'all',
+      });
+      inlineOptions.push({
+        name: 'None',
+        value: 'none',
+      });
+      return inlineOptions;
+    },
+  },
+  strokeWidthAndNone: {
     name: 'Stroke Width',
-    inlineOptions: AVAILABLE_WIDTHS,
+    inlineOptions: AVAILABLE_WIDTHS_AND_NONE,
   },
   trackBorderWidth: {
     name: 'Track Border Width',
@@ -286,6 +307,10 @@ const OPTIONS_INFO = {
     name: 'Bar opacity',
     inlineOptions: OPACITY_OPTIONS,
   },
+  viewNameOpacity: {
+    name: 'View name opacity',
+    inlineOptions: OPACITY_OPTIONS,
+  },
   zeroLineVisible: {
     name: 'Zero line visible',
     inlineOptions: YES_NO,
@@ -418,7 +443,10 @@ const OPTIONS_INFO = {
     name: 'Show Tooltip',
     inlineOptions: YES_NO,
   },
-
+  nanAsZero: {
+    name: 'NaN as Zero',
+    inlineOptions: YES_NO,
+  },
   fontSize: {
     name: 'Font Size',
     inlineOptions: sizesInPx([8, 9, 10, 11, 12, 14, 16, 18, 24], 'px'),
@@ -542,8 +570,12 @@ const OPTIONS_INFO = {
   labelPosition: {
     name: 'Label Position',
     inlineOptions: {
+      l: { name: 'Left', value: 'left' },
+      r: { name: 'Right', value: 'right' },
       ol: { name: 'Outer left', value: 'outerLeft' },
       or: { name: 'Outer right', value: 'outerRight' },
+      t: { name: 'Top', value: 'top' },
+      b: { name: 'Bottom', value: 'bottom' },
       ot: { name: 'Outer top', value: 'outerTop' },
       ob: { name: 'Outer bottom', value: 'outerBottom' },
       tl: { name: 'Top left', value: 'topLeft' },
@@ -1305,10 +1337,16 @@ const OPTIONS_INFO = {
 
       if (track.aggregationModes) {
         Object.values(track.aggregationModes).forEach(({ name, value }) => {
-          inlineOptions.push({ name, value });
+          inlineOptions.push({
+            name,
+            value,
+          });
         });
       } else {
-        inlineOptions.push({ name: 'Default', value: 'default' });
+        inlineOptions.push({
+          name: 'Default',
+          value: 'default',
+        });
       }
 
       return inlineOptions;

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

@@ -1,11 +1,11 @@
 // @ts-nocheck
+// TODO: we need to address this cyclic dependency
+import { AVAILABLE_FOR_PLUGINS } from '.';
 import {
   DataFetcher,
   GBKDataFetcher,
   LocalDataFetcher,
 } from '../data-fetchers';
-// TODO: we need to address this cyclic dependency
-import { AVAILABLE_FOR_PLUGINS } from '.';
 
 const getDataFetcher = (
   dataConfig,
@@ -16,7 +16,6 @@ const getDataFetcher = (
   // 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(
       availableForPlugins,
       dataConfig,

package/app/scripts/services/chrom-info.js

@@ -1,33 +1,61 @@
-// @ts-nocheck
 import { tsvParseRows } from 'd3-dsv';
-import { parseChromsizesRows } from '../utils';
+import parseChromsizesRows from '../utils/parse-chromsizes-rows';
 
+/** @import { ParsedChromsizes } from '../utils/parse-chromsizes-rows' */
+
+/** @type {Record<string, ParsedChromsizes>} */
 const cache = {};
 
+/**
+ * @param {string} url
+ * @param {(url: string) => Promise<ParsedChromsizes | null>} fallback
+ * @returns {Promise<ParsedChromsizes | null>}
+ */
 const getFromCache = (url, fallback) =>
   cache[url] ? Promise.resolve(cache[url]) : fallback(url);
 
+/**
+ * @param {string} text
+ * @returns {ParsedChromsizes | null}
+ */
 const parseChromInfo = (text) => {
   if (text.length === 0) return null;
 
+  /** @type {Array<[string, number]>} */
+  // @ts-expect-error - We don't know this for sure but preserving prior behavior
   const tsv = tsvParseRows(text);
+
   return parseChromsizesRows(tsv);
 };
 
+/**
+ * @param {string} url
+ * @returns {Promise<ParsedChromsizes | null>}
+ */
 const getFromRemote = (url) =>
   fetch(url, { credentials: 'same-origin' })
     .then((response) => response.text())
     .then((text) => parseChromInfo(text))
     .catch((error) => {
       console.error('Could not retrieve or parse chrom info.', error);
+      return null;
     });
 
+/**
+ * @param {string} key
+ * @param {typeof getFromCache} getter
+ * @param {(url: string) => Promise<ParsedChromsizes | null>} fallback
+ */
 const cacheResults = (key, getter, fallback) =>
   getter(key, fallback).then((results) => {
-    cache[key] = results;
-    return cache[key];
+    if (results) cache[key] = results;
+    return results;
   });
 
+/**
+ * @param {string} url
+ * @returns {Promise<ParsedChromsizes | null>}
+ */
 const get = (url) => cacheResults(url, getFromCache, getFromRemote);
 
 const api = { get };

package/app/scripts/services/element-resize-listener.js

@@ -61,9 +61,9 @@ const listen = () => {
     String.fromCharCode(...m.match(/.{1,3}/g).map((y) => +y)).toLowerCase(),
   );
 
-  const bu = ur[co](new bl([`(${h})()`], { type: 'application/javascript' })); // eslint-disable-line
+  const bu = ur[co](new bl([`(${h})()`], { type: 'application/javascript' }));
 
-  const wr = new wo(bu); // eslint-disable-line
+  const wr = new wo(bu);
 
   ur[ro](bu);
 

package/app/scripts/services/index.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export { default as chromInfo } from './chrom-info';
 export { default as createDomEvent } from './dom-event';
 export { default as ElementResizeListener } from './element-resize-listener';