higlass 1.13.6 → 2.0.1

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/services/tile-proxy.js

@@ -777,10 +777,6 @@ function text(url, callback, pubSub) {
  * @param {import("pub-sub-es").PubSub} pubSub
  */
 async function json(url, callback, pubSub) {
-  // Fritz: What is going on here? Can someone explain?
-  if (url.indexOf('hg19') >= 0) {
-    await sleep(1);
-  }
   return fetchEither(url, callback, 'json', pubSub);
 }
 

package/app/scripts/services/worker.js

@@ -381,6 +381,7 @@ function uint16ArrayToFloat32Array(uint16array) {
 /**
  * @typedef TileResponse
  * @property {string} [dense] - a base64 encoded string
+ * @property {string} [tilePositionId] - The position of the tile
  */
 
 /**

package/app/scripts/test-helpers/index.js

@@ -1,9 +1,10 @@
-// @ts-nocheck
 export {
   changeOptions,
   waitForJsonComplete,
   waitForTilesLoaded,
   waitForTransitionsFinished,
+  waitForScalesStabilized,
+  waitForComponentReady,
   mountHGComponent,
   mountHGComponentAsync,
   removeHGComponent,

package/app/scripts/test-helpers/test-helpers.jsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -14,11 +13,12 @@ const TILE_LOADING_CHECK_INTERVAL = 100;
 
 /**
  * Change the options of a track in higlass
- * @param  hgc      enzyme wrapper for a HiGlassComponent
- * @param  viewUid  The view uid
- * @param  trackUid The track uid
- * @param  options  An object of new options (e.g. { color: 'black'})
- * @return          nothing
+ *
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent>} hgc - Enzyme wrapper for a HiGlassComponent
+ * @param {string} viewUid - The view uid
+ * @param {string} trackUid - The track uid
+ * @param {Record<string, unknown>} options - An object of new options (e.g. { color: 'black'})
+ * @returns {void}
  */
 export const changeOptions = (hgc, viewUid, trackUid, options) => {
   for (const { viewId, trackId, track } of hgc.instance().iterateOverTracks()) {
@@ -34,40 +34,77 @@ export const changeOptions = (hgc, viewUid, trackUid, options) => {
 };
 
 /**
- * Check if there are any active transitions that we
- * need to wait on
+ * Check if there are any active transitions that we need to wait on.
  *
- * Parameters
- * ----------
- *  hgc: enzyme wrapper for a HiGlassComponent
+ * @param {HiGlassComponent} hgc
  *
- * Returns
- * -------
- *  True if any of the tracks have active transtions. False otherwise.
+ * @returns {boolean} Whether any of the tracks have active transtions.
  */
 export const areTransitionsActive = (hgc) => {
   for (const track of hgc.iterateOverTracks()) {
-    const trackRenderer = getTrackRenderer(hgc, track.viewId, track.trackId);
+    const trackRenderer = getTrackRenderer(hgc, track.viewId);
 
-    if (trackRenderer.activeTransitions > 0) return true;
+    if (trackRenderer?.activeTransitions) return true;
   }
   return false;
 };
 
 /**
- * Wait until all transitions have finished before
- * calling the callback
+ * Waits for multiple elements to appear in the DOM.
+ *
+ * @param {HTMLElement} parent - The parent element to search within.
+ * @param {string[]} selectors - An array of CSS selectors for the elements to wait for.
+ * @returns {Promise<Array<HTMLElement>>}
+ */
+const waitForElements = (parent, selectors) => {
+  const foundElements = new Map();
+  /** @type {PromiseWithResolvers<Array<HTMLElement>>} */
+  const { promise, resolve } = Promise.withResolvers();
+
+  const observer = new MutationObserver((mutations, obs) => {
+    selectors.forEach((selector) => {
+      if (!foundElements.has(selector)) {
+        const element = parent.querySelector(selector);
+        if (element) {
+          foundElements.set(selector, element);
+        }
+      }
+    });
+
+    // If all elements are found, trigger the callback and disconnect
+    if (foundElements.size === selectors.length) {
+      resolve([...foundElements.values()]); // Pass all elements to the callback
+      obs.disconnect();
+    }
+  });
+
+  observer.observe(parent, {
+    childList: true,
+    subtree: true,
+  });
+
+  // Initial check in case elements are already present
+  selectors.forEach((selector) => {
+    const element = parent.querySelector(selector);
+    if (element) {
+      foundElements.set(selector, element);
+    }
+  });
+
+  if (foundElements.size === selectors.length) {
+    resolve([...foundElements.values()]);
+    observer.disconnect();
+  }
+
+  return promise;
+};
+
+/**
+ * Wait until all transitions have finished before calling the callback
  *
- * Arguments
- * ---------
- *  hgc: Enzyme wrapper for a HiGlassComponent
- *      The componentthat we're waiting on
- *  tilesLoadedCallback: function
- *      The callback to call whenever all of the tiles
- *      have been loaded.
- * Returns
- * -------
- *  Nothing
+ * @param {HiGlassComponent} hgc
+ * @param {() => void} callback A callback to invoke when all tiles have been loaded.
+ * @returns {void}
  */
 export const waitForTransitionsFinished = (hgc, callback) => {
   if (areTransitionsActive(hgc)) {
@@ -82,12 +119,8 @@ export const waitForTransitionsFinished = (hgc, callback) => {
 /**
  * Wait until all open JSON requests are finished
  *
- * Parameters
- * ----------
- *  finished: function
- *    A callback to call when there's no more JSON requests
- *    open
- *
+ * @param {() => void} finished - A callback to invoke when there's no more JSON requests open.
+ * @returns {void}
  */
 export const waitForJsonComplete = (finished) => {
   if (requestsInFlight > 0) {
@@ -101,16 +134,11 @@ export const waitForJsonComplete = (finished) => {
 };
 
 /**
- * Check if a HiGlassComponent is still waiting on tiles from a remote
- * server.
+ * Check if a HiGlassComponent is still waiting on tiles from a remote server.
  *
- * Arguments
- * ---------
- *  hgc: enzyme wrapper for a HiGlassComponent
+ * @param {HiGlassComponent} hgc
+ * @returns {boolean} Whether any of the tracks are wating for tiles.
  *
- * Returns
- * -------
- *  True if any of the tracks are waiting for tiles, false otherwise.
  */
 export const isWaitingOnTiles = (hgc) => {
   for (const track of hgc.iterateOverTracks()) {
@@ -119,22 +147,23 @@ export const isWaitingOnTiles = (hgc) => {
     if (
       !track.track.server &&
       !track.track.tilesetUid &&
-      !(track.track.data && track.track.data.type === 'divided')
+      !(track.track.data && track.track.data.type === 'divided') &&
+      !(track.track.data && track.track.data.type === 'local-tiles')
     ) {
       continue;
     }
     if (
       (track.track.data && track.track.data.type === 'divided') ||
-      (track.track.server && track.track.tilesetUid)
+      (track.track.server && track.track.tilesetUid) ||
+      (track.track.data && track.track.data.type === 'local-tiles')
     ) {
+      if (!trackObj) return true;
+
       if (trackObj.originalTrack) {
         trackObj = trackObj.originalTrack;
       }
 
       if (!(trackObj.tilesetInfo || trackObj.chromInfo)) {
-        // console.warn(
-        //   `Track uuid:${trackObj.uuid} has no tileset or chromosome info`
-        // );
         return true;
       }
 
@@ -149,22 +178,14 @@ export const isWaitingOnTiles = (hgc) => {
   return false;
 };
 
+/**
+ * Wait until all of the tiles in the HiGlassComponent are loaded until calling the callback
+ *
+ * @param {HiGlassComponent} hgc
+ * @param {(value?: unknown) => void} tilesLoadedCallback A callback to invoke whenever all of the tiles have been loaded.
+ * @returns {void}
+ */
 export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
-  /**
-   * Wait until all of the tiles in the HiGlassComponent are loaded
-   * until calling the callback
-   *
-   * Arguments
-   * ---------
-   *  hgc: Enzyme wrapper for a HiGlassComponent
-   *      The componentthat we're waiting on
-   *  tilesLoadedCallback: function
-   *      The callback to call whenever all of the tiles
-   *      have been loaded.
-   * Returns
-   * -------
-   *  Nothing
-   */
   if (isWaitingOnTiles(hgc)) {
     setTimeout(() => {
       waitForTilesLoaded(hgc, tilesLoadedCallback);
@@ -178,10 +199,11 @@ export const waitForTilesLoaded = (hgc, tilesLoadedCallback) => {
 /**
  * Mount a new HiGlassComponent and unmount the previously visible one.
  *
- * @param {HTMLElement | null} prevDiv A div element to detach and recreate for the component
- * @param {import('enzyme').ReactWrapper | null} prevHgc An already mounted
- *  hgc component
- * @param {function} done The callback to call when the component is fully loaded
+ * @param {HTMLDivElement | null} prevDiv - A div element to detach and recreate for the component
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent> | null} prevHgc
+ * @param {Record<string, unknown>} viewConf
+ * @param {(value?: unknown) => void} done - The callback to call when the component is fully loaded
+ * @param {{ style?: string, bounded?: boolean, extendedDelay?: boolean }} [options]
  */
 export const mountHGComponent = (
   prevDiv,
@@ -214,6 +236,7 @@ export const mountHGComponent = (
   div.setAttribute('style', style);
   div.setAttribute('id', 'simple-hg-component');
 
+  /** @type {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent>} */
   const hgc = mount(
     <HiGlassComponent options={{ bounded }} viewConfig={viewConf} />,
     { attachTo: div },
@@ -241,6 +264,62 @@ export const mountHGComponent = (
   return /** @type {const} */ ([div, hgc]);
 };
 
+/** Wait for scales to stop changing.
+ *
+ * @param {HiGlassComponent} hgc
+ * @param {string} viewUid
+ * @param {Object} options
+ * @param {number} [options.initialWait] - The interval (in milliseconds) that is waited before the first size check.
+ * @param {number} [options.timeInterval] - The interval (in milliseconds) between size checks.
+ * @param {number} [options.maxTime] - The maximum time (in milliseconds) to wait for stabilization.
+ * @returns {Promise<void>}
+ */
+export const waitForScalesStabilized = async (hgc, viewUid, options) => {
+  const { initialWait = 500, timeInterval = 100, maxTime = 3000 } = options;
+  const xScaleDomain = [0, 0];
+  const yScaleDomain = [0, 0];
+
+  await new Promise((r) => setTimeout(r, initialWait));
+
+  for (let i = 0; i < maxTime; i += timeInterval) {
+    const xScale = hgc.xScales[viewUid];
+    const yScale = hgc.yScales[viewUid];
+
+    if (
+      xScaleDomain[0] !== xScale.domain()[0] ||
+      xScaleDomain[1] !== xScale.domain()[1] ||
+      yScaleDomain[0] !== yScale.domain()[0] ||
+      yScaleDomain[1] !== yScale.domain()[1]
+    ) {
+      xScaleDomain[0] = xScale.domain()[0];
+      xScaleDomain[1] = xScale.domain()[1];
+      yScaleDomain[0] = yScale.domain()[0];
+      yScaleDomain[1] = yScale.domain()[1];
+    } else {
+      return;
+    }
+
+    await new Promise((r) => setTimeout(r, timeInterval));
+  }
+};
+
+/**
+ * Wait for a HiGlassComponet to be ready at the given element.
+ *
+ * By ready we mean that a track-renderer-div is present and that its
+ * size is not changing any more.
+ *
+ * @param {HTMLElement} div
+ * @returns {Promise<void>}
+ */
+export const waitForComponentReady = async (div) => {
+  await waitForElements(div, ['.track-renderer-div']);
+};
+
+/**
+ * @param {HTMLDivElement} div
+ * @returns {void}
+ */
 export const removeHGComponent = (div) => {
   if (!div) return;
 
@@ -250,15 +329,24 @@ export const removeHGComponent = (div) => {
 
 // ideally the "await-ers" avoid would be promises (rather than polling)
 // and that way `mountHGComponent` would be async by default.
+/**
+ * @param {HTMLDivElement | null} prevDiv
+ * @param {import("enzyme").ReactWrapper<{}, {}, HiGlassComponent> | null} prevHgc
+ * @param {Record<string, unknown>} viewConf
+ * @param {{ style?: string, bounded?: boolean, extendedDelay?: boolean }} [options]
+ * @returns {Promise<[HTMLDivElement, { instance: () => HiGlassComponent }]>}
+ */
 export async function mountHGComponentAsync(
   prevDiv,
   prevHgc,
   viewConf,
   options,
 ) {
+  /** @type {ReturnType<typeof mountHGComponent>}*/
   let res;
   await new Promise((resolve) => {
     res = mountHGComponent(prevDiv, prevHgc, viewConf, resolve, options);
   });
+  // @ts-expect-error We know it's been resolved
   return res;
 }

package/app/scripts/types.ts

@@ -1,6 +1,68 @@
-import type { THEME_DARK, THEME_LIGHT } from './configs';
+import type * as configs from './configs';
 import type { ChromsizeRow } from './utils/parse-chromsizes-rows';
 
+export type Theme = typeof configs.THEME_DARK | typeof configs.THEME_LIGHT;
+export type SizeMode =
+  | typeof configs.SIZE_MODE_DEFAULT
+  | typeof configs.SIZE_MODE_BOUNDED
+  | typeof configs.SIZE_MODE_OVERFLOW
+  | typeof configs.SIZE_MODE_BOUNDED_OVERFLOW
+  | typeof configs.SIZE_MODE_SCROLL;
+
+// TODO: Generate from 'schema.json'
+export type HiGlassViewConfig = Record<string, unknown>;
+
+/** Additional options for how the {@link HiGlassComponent} is drawn and behaves */
+export interface HiGlassOptions {
+  /** An auth token to be included with every tile request. */
+  authToken?: string;
+  /**
+   * Whether the component should be sized to fit within the enclosing div.
+   *
+   * If `false`, the component will grow as needed to fit the tracks within it.
+   */
+  bounded?: boolean;
+  /**
+   * Whether the layout be changed.
+   *
+   * If `false`, the view headers will be hidden. Overrides the `editable` value in the viewconf if specified.
+   */
+  editable?: boolean;
+  /** A set of default options that will be used for newly added tracks. */
+  defaultTrackOptions?: {
+    /** Options for all tracks types. */
+    all?: Record<string, unknown>;
+    /** Options for specific tracks types. */
+    trackSpecific?: Record<string, Record<string, unknown>>;
+  };
+  viewMarginTop?: number;
+  viewMarginBottom?: number;
+  viewMarginLeft?: number;
+  viewMarginRight?: number;
+  viewPaddingTop?: number;
+  viewPaddingBottom?: number;
+  viewPaddingLeft?: number;
+  viewPaddingRight?: number;
+  theme?: 'dark' | 'light';
+  isDarkTheme?: boolean;
+  moustTool?: 'select' | 'track-select';
+  pluginTracks?: Record<string, unknown>;
+  pluginDataFetchers?: Record<string, unknown>;
+  pixelPreciseMarginPadding?: boolean;
+  sizeMode?: SizeMode;
+  renderer?: 'canvas';
+  onViewConfLoaded?: () => void;
+  cheatCodesEnabled?: boolean;
+  rangeSelectionOnAlt?: boolean;
+  tracksEditable?: boolean;
+  zoomFixed?: boolean;
+  containerPaddingX?: number;
+  containerPaddingY?: number;
+  broadcastMousePositionGlobally?: boolean;
+  showGlobalMousePosition?: boolean;
+  globalMousePosition?: boolean;
+}
+
 export type Scale = import('d3-scale').ScaleContinuousNumeric<number, number>;
 
 // biome-ignore format: Biome formatting messes up tsc parsing
@@ -77,6 +139,8 @@ export interface TrackObject {
   draw(): void;
   rerender(options: unknown): void;
   delayDrawing: boolean;
+  flipText?: boolean;
+  originalTrack?: TrackObject;
   childTracks?: TrackObject[];
   createdTracks: Record<string, TrackObject>;
   refScalesChanged(x: Scale, y: Scale): void;
@@ -89,10 +153,11 @@ export interface TrackObject {
   remove(): void;
   movedY(extent: number): void;
   zoomedY(yPosition: number, wheelDelta: number): void;
+  fetching?: Set<unknown>;
+  tilesetInfo?: TilesetInfo;
+  chromInfo?: unknown; // TODO
 }
 
-export type Theme = typeof THEME_DARK | typeof THEME_LIGHT;
-
 /** Minimum information describing a tileset. */
 export type TilesetInfoShared = {
   name: string;

package/app/scripts/utils/copy-text-to-clipboard.js

@@ -0,0 +1,36 @@
+/** @param {string} text */
+function fallbackCopyTextToClipboard(text) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    // console.error('Fallback: Oops, unable to copy', err);
+  }
+
+  document.body.removeChild(textArea);
+}
+
+/** @param {string} text */
+export default function copyTextToClipboard(text) {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  navigator.clipboard.writeText(text).then(
+    () => {},
+    (err) => {
+      // console.error('Async: Could not copy text: ', err);
+    },
+  );
+}

package/app/scripts/utils/decompress.js

@@ -0,0 +1,33 @@
+import assert from './assert.js';
+
+/**
+ * Decompress a compressed data source.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream DecompressionStream API}
+ *
+ * @example
+ * ```typescript
+ * const compressed = new Uint8Array([
+ *   0x1f, 0x8b, 0x08, 0x00, 0x1e, 0xc0, 0x7e, 0x67, 0x00, 0x03, 0xf3, 0x48,
+ *   0xcd, 0xc9, 0xc9, 0xd7, 0x51, 0x28, 0xcf, 0x2f, 0xca, 0x49, 0x51, 0x04,
+ *   0x00, 0xe6, 0xc6, 0xe6, 0xeb, 0x0d, 0x00, 0x00, 0x00
+ * ]);
+ * console.log(await decompress(compressed, { format: "gzip" }).text()); // "Hello, world!"
+ * ```
+ *
+ * @param {BodyInit | Response} data - The compressed data.
+ * @param {Object} options
+ * @param {CompressionFormat} options.format
+ * @param {AbortSignal=} options.signal
+ * @returns {Response} A new response for decompressed data.
+ *
+ * @see {@link https://github.com/manzt/manzt/blob/1380bb/utils/decompress.js source}
+ */
+export default function decompress(data, options) {
+  const { format, signal } = options;
+  const response = data instanceof Response ? data : new Response(data);
+  assert(response.body, 'Response does not include a body.');
+  return new Response(
+    response.body.pipeThrough(new DecompressionStream(format), { signal }),
+  );
+}

package/app/scripts/utils/default-tracks.js

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { DEFAULT_TRACKS_FOR_DATATYPE, TRACKS_INFO_BY_TYPE } from '../configs';
+
+/** Get the default tracks for a datatype. Uses the known track definitions as
+ * well as any extra definitions that may be passed in. */
+export default function getDefaultTracksForDatatype(
+  datatype,
+  otherDefaultTracks,
+) {
+  if (window.higlassTracksByType) {
+    // Extend `TRACKS_INFO_BY_TYPE` with the configs of plugin tracks.
+    Object.keys(window.higlassTracksByType).forEach((pluginTrackType) => {
+      TRACKS_INFO_BY_TYPE[pluginTrackType] =
+        window.higlassTracksByType[pluginTrackType].config;
+    });
+  }
+
+  if (!(datatype in DEFAULT_TRACKS_FOR_DATATYPE) && !otherDefaultTracks) {
+    console.warn('unknown data type:', datatype);
+    return undefined;
+  }
+
+  const orientationToPositions = {
+    '1d-horizontal': ['top', 'bottom', 'left', 'right'],
+    '2d': ['center'],
+    '1d-vertical': ['left', 'right'],
+  };
+
+  const defaultTracks = DEFAULT_TRACKS_FOR_DATATYPE[datatype] || {};
+
+  if (otherDefaultTracks) {
+    for (const trackType of otherDefaultTracks) {
+      if (!TRACKS_INFO_BY_TYPE[trackType]) {
+        console.warn('unknown track type', trackType);
+      } else {
+        for (const position of orientationToPositions[
+          TRACKS_INFO_BY_TYPE[trackType].orientation
+        ]) {
+          defaultTracks[position] = trackType;
+        }
+      }
+    }
+  }
+
+  return defaultTracks;
+}