higlass 1.11.8 → 1.11.11

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Release notes
 
+## v1.11.11
+
+- Bump terser-webpack-plugin version to fix build issue
+
+## v1.11.10
+
+- Remove dependency on `cwise`
+- Fix color issue in GeneAnnotation SVG export
+
 ## v1.11.8
 
+- Remove react-bootstrap from the GenomePositionSearchBox
 - Make vertical chromosome labels as well as loading status labels readable in vertical tracks
 - Added an option menu item for rectangle domain fill opacity
+- Added a parameter in `zoomToGene` to allow specifying padding around gene
 - Add data fetchers to `AVAILABLE_FOR_PLUGINS`
 - Update track list in `AVAILABLE_FOR_PLUGINS`
 - Correctly setup initial scales of vertical tracks when the width of a center track is zero.
+- Config-wise, allow axis-specific location locks (e.g., lock the vertical axis in a view to the horizontal axis in another).
+- Add `reload` implementation to `HiGlassComponenet` API.
 
 _[Detailed changes since v1.11.5](https://github.com/higlass/higlass/compare/v1.11.7...develop)_
 

package/app/schema.json

@@ -26,8 +26,8 @@
       "items": { "type": "string" },
       "minLength": 1
     },
-    "zoomLocks": { "$ref": "#/definitions/locks/genericLocks" },
-    "locationLocks": { "$ref": "#/definitions/locks/genericLocks" },
+    "zoomLocks": { "$ref": "#/definitions/locks/zoomLocks" },
+    "locationLocks": { "$ref": "#/definitions/locks/locationLocks" },
     "valueScaleLocks": { "$ref": "#/definitions/locks/valueScaleLocks" },
     "views": {
       "type": "array",
@@ -61,7 +61,48 @@
         }
       },
 
-      "genericLocks": {
+      "axisSpecificLocks": {
+        "additionalProperties": false,
+        "properties": {
+          "axis": {
+            "enum": ["x", "y"],
+            "type": "string"
+          },
+          "lock": {
+            "type": "string"
+          }
+        },
+        "required": ["lock", "axis"],
+        "type": "object"
+      },
+
+      "locationLocksByViewUid": {
+        "type": "object",
+        "additionalProperties": false,
+        "patternProperties": {
+          ".": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "additionalProperties": false,
+                "properties": {
+                  "x": {
+                    "$ref": "#/definitions/locks/axisSpecificLocks"
+                  },
+                  "y": {
+                    "$ref": "#/definitions/locks/axisSpecificLocks"
+                  }
+                },
+                "type": "object"
+              }
+            ]
+          }
+        }
+      },
+
+      "zoomLocks": {
         "type": "object",
         "additionalProperties": false,
         "required": [],
@@ -93,6 +134,40 @@
         }
       },
 
+      "locationLocks": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [],
+        "properties": {
+          "locksByViewUid": {
+            "$ref": "#/definitions/locks/locationLocksByViewUid"
+          },
+          "locksDict": {
+            "type": "object",
+            "additionalProperties": false,
+            "patternProperties": {
+              ".": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "uid": { "$ref": "#/definitions/locks/slug" }
+                },
+                "patternProperties": {
+                  "^(?!uid).": {
+                    "type": "array",
+                    "minLength": 3,
+                    "maxLength": 3,
+                    "items": {
+                      "type": "number"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+
       "valueScaleLocks": {
         "type": "object",
         "additionalProperties": false,
@@ -253,7 +328,9 @@
             "type": "integer",
             "title": "Height",
             "default": 12
-          }
+          },
+          "moved": { "type": "boolean" },
+          "static": { "type": "boolean" }
         }
       },
 
@@ -307,7 +384,8 @@
           "position": { "type": "string" },
           "server": { "type": "string" },
           "tilesetUid": { "type": "string" },
-          "width": { "type": "number" }
+          "width": { "type": "number" },
+          "transforms": { "type": "array" }
         }
       },
 

package/app/scripts/GenomePositionSearchBox.js

@@ -1,12 +1,6 @@
 import { select, event } from 'd3-selection';
 import React from 'react';
 import slugid from 'slugid';
-import {
-  FormGroup,
-  Glyphicon,
-  DropdownButton,
-  MenuItem,
-} from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import Autocomplete from './Autocomplete';
@@ -23,7 +17,7 @@ import { scalesCenterAndK, dictKeys, toVoid } from './utils';
 
 // HOCS
 import withTheme from './hocs/with-theme';
-
+import { SearchIcon } from './icons';
 // Configs
 import { THEME_DARK, ZOOM_TRANSITION_DURATION } from './configs';
 
@@ -771,37 +765,31 @@ class GenomePositionSearchBox extends React.Component {
 
   render() {
     const assemblyMenuItems = this.state.availableAssemblies.map((x) => (
-      <MenuItem key={x} eventKey={x}>
+      <option key={x} value={x}>
         {x}
-      </MenuItem>
+      </option>
     ));
 
     let className = this.state.isFocused
       ? 'styles.genome-position-search-focus'
       : 'styles.genome-position-search';
 
-    const classNameButton = this.state.isFocused
-      ? 'styles.genome-position-search-bar-button-focus'
-      : 'styles.genome-position-search-bar-button';
-
     if (this.props.theme === THEME_DARK) {
       className += ' styles.genome-position-search-dark';
     }
 
     return (
-      <FormGroup
+      <div
         ref={(c) => {
           this.gpsbForm = c;
         }}
-        bsSize="small"
         styleName={className}
       >
         {!this.props.hideAvailableAssemblies && (
-          <DropdownButton
+          <select
             ref={(c) => {
               this.assemblyPickButton = c;
             }}
-            bsSize="small"
             className={styles['genome-position-search-bar-button']}
             id={this.uid}
             onSelect={this.handleAssemblySelect.bind(this)}
@@ -812,7 +800,7 @@ class GenomePositionSearchBox extends React.Component {
             }
           >
             {assemblyMenuItems}
-          </DropdownButton>
+          </select>
         )}
 
         <Autocomplete
@@ -853,14 +841,11 @@ class GenomePositionSearchBox extends React.Component {
           wrapperStyle={{ width: '100%' }}
         />
 
-        <button
+        <SearchIcon
           onClick={this.buttonClick.bind(this)}
-          styleName={classNameButton}
-          type="button"
-        >
-          <Glyphicon glyph="search" />
-        </button>
-      </FormGroup>
+          theStyle="multitrack-header-icon"
+        />
+      </div>
     );
   }
 }

package/app/scripts/HeatmapOptions.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Modal, Button } from 'react-bootstrap';
+import Dialog from './Dialog';
 
 import HiGlassComponent from './HiGlassComponent';
 import SketchInlinePicker from './SketchInlinePicker';
@@ -198,50 +198,56 @@ class HeatmapOptions extends React.Component {
       ) : null; // addButton
 
     return (
-      <Modal className="hg-modal" onHide={this.props.onCancel} show={true}>
-        <Modal.Header closeButton>
-          <Modal.Title>Custom Color Map</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <table className="table-track-options">
-            <thead />
-            <tbody style={{ verticalAlign: 'top' }}>
-              <tr>
-                <td className="td-track-options">
-                  <tr>
-                    <td className="td-track-options">Preview</td>
-                  </tr>
-                  <tr>
-                    <td className="td-track-options">
-                      <div style={{ width: 200 }}>
-                        <HiGlassComponent
-                          options={{ bounded: false }}
-                          viewConfig={mvConfig}
-                        />
-                      </div>
-                    </td>
-                  </tr>
-                </td>
-                <td className="td-track-options">
-                  <tr>
-                    <td className="td-track-options">Colors</td>
-                  </tr>
-                  <tr>
-                    <td className="td-track-options">
-                      {addButton}
-                      <div style={{ position: 'relative' }}>{colorFields}</div>
-                    </td>
-                  </tr>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.props.onCancel}>Cancel</Button>
-          <Button onClick={this.handleSubmit.bind(this)}>Submit</Button>
-        </Modal.Footer>
-      </Modal>
+      <Dialog
+        okayTitle="Submit"
+        onCancel={this.props.onCancel}
+        onOkay={this.handleSubmit.bind(this)}
+        title="Custom Color Map"
+      >
+        <table className="table-track-options">
+          <thead />
+          <tbody style={{ verticalAlign: 'top' }}>
+            <tr>
+              <td className="td-track-options">
+                <table>
+                  <tbody>
+                    <tr>
+                      <td className="td-track-options">Preview</td>
+                    </tr>
+                    <tr>
+                      <td className="td-track-options">
+                        <div style={{ width: 200 }}>
+                          <HiGlassComponent
+                            options={{ bounded: false }}
+                            viewConfig={mvConfig}
+                          />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+              <td className="td-track-options">
+                <table>
+                  <tbody>
+                    <tr>
+                      <td className="td-track-options">Colors</td>
+                    </tr>
+                    <tr>
+                      <td className="td-track-options">
+                        {addButton}
+                        <div style={{ position: 'relative' }}>
+                          {colorFields}
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Dialog>
     );
   }
 }

package/app/scripts/HiGlassComponent.js

@@ -143,6 +143,9 @@ class HiGlassComponent extends React.Component {
     this.zoomLocks = {};
     this.locationLocks = {};
 
+    // axis-specific location lock
+    this.locationLocksAxisWise = { x: {}, y: {} };
+
     // locks that keep the value scales synchronized between
     // *tracks* (which can be in different views)
     this.valueScaleLocks = {};
@@ -1724,6 +1727,132 @@ class HiGlassComponent extends React.Component {
       }
     }
 
+    if (this.locationLocksAxisWise.x[uid]) {
+      // the x axis of this view is locked to an axis of another view
+      const lockGroup = this.locationLocksAxisWise.x[uid].lock;
+      const lockGroupItems = dictItems(lockGroup);
+
+      // this means the x axis of this view (uid) is locked to the y axis of another view
+      const lockCrossAxis = this.locationLocksAxisWise.x[uid].axis !== 'x';
+
+      // eslint-disable-next-line no-unused-vars
+      const [centerX, centerY, k] = scalesCenterAndK(
+        this.xScales[uid],
+        this.yScales[uid],
+      );
+
+      for (let i = 0; i < lockGroupItems.length; i++) {
+        const key = lockGroupItems[i][0];
+        const value = lockGroupItems[i][1];
+
+        if (!this.xScales[key] || !this.yScales[key]) {
+          continue;
+        }
+
+        // eslint-disable-next-line no-unused-vars
+        const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
+          this.xScales[key],
+          this.yScales[key],
+        );
+
+        if (key === uid) {
+          // no need to notify oneself that the scales have changed
+          continue;
+        }
+
+        const dx = value[0] - lockGroup[uid][0];
+
+        const newCenterX = centerX + dx;
+
+        if (!this.setCenters[key]) {
+          continue;
+        }
+
+        const [newXScale, newYScale] = this.setCenters[key](
+          lockCrossAxis ? keyCenterX : newCenterX,
+          lockCrossAxis ? newCenterX : keyCenterY,
+          keyK,
+          false,
+        );
+
+        // because the setCenters call above has a 'false' notify, the new scales won't
+        // be propagated from there, so we have to store them here
+        this.xScales[key] = newXScale;
+        this.yScales[key] = newYScale;
+
+        // notify the listeners of all locked views that the scales of
+        // this view have changed
+        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+          dictValues(this.scalesChangedListeners[key]).forEach((x) => {
+            x(newXScale, newYScale);
+          });
+        }
+      }
+    }
+
+    if (this.locationLocksAxisWise.y[uid]) {
+      // the y axis of this view is locked to an axis of another view
+      const lockGroup = this.locationLocksAxisWise.y[uid].lock;
+      const lockGroupItems = dictItems(lockGroup);
+
+      // this means the y axis of this view (uid) is locked to the x axis of another view
+      const lockCrossAxis = this.locationLocksAxisWise.y[uid].axis !== 'y';
+
+      // eslint-disable-next-line no-unused-vars
+      const [centerX, centerY, k] = scalesCenterAndK(
+        this.xScales[uid],
+        this.yScales[uid],
+      );
+
+      for (let i = 0; i < lockGroupItems.length; i++) {
+        const key = lockGroupItems[i][0];
+        const value = lockGroupItems[i][1];
+
+        if (!this.xScales[key] || !this.yScales[key]) {
+          continue;
+        }
+
+        // eslint-disable-next-line no-unused-vars
+        const [keyCenterX, keyCenterY, keyK] = scalesCenterAndK(
+          this.xScales[key],
+          this.yScales[key],
+        );
+
+        if (key === uid) {
+          // no need to notify oneself that the scales have changed
+          continue;
+        }
+
+        const dy = value[1] - lockGroup[uid][1];
+
+        const newCenterY = centerY + dy;
+
+        if (!this.setCenters[key]) {
+          continue;
+        }
+
+        const [newXScale, newYScale] = this.setCenters[key](
+          lockCrossAxis ? newCenterY : keyCenterX,
+          lockCrossAxis ? keyCenterY : newCenterY,
+          keyK,
+          false,
+        );
+
+        // because the setCenters call above has a 'false' notify, the new scales won't
+        // be propagated from there, so we have to store them here
+        this.xScales[key] = newXScale;
+        this.yScales[key] = newYScale;
+
+        // notify the listeners of all locked views that the scales of
+        // this view have changed
+        if (this.scalesChangedListeners.hasOwnProperty(key)) {
+          dictValues(this.scalesChangedListeners[key]).forEach((x) => {
+            x(newXScale, newYScale);
+          });
+        }
+      }
+    }
+
     this.animate();
 
     // Call view change handler
@@ -3195,10 +3324,40 @@ class HiGlassComponent extends React.Component {
 
     if (viewConfig.locationLocks) {
       for (const viewUid of dictKeys(viewConfig.locationLocks.locksByViewUid)) {
-        this.locationLocks[viewUid] =
-          viewConfig.locationLocks.locksDict[
-            viewConfig.locationLocks.locksByViewUid[viewUid]
-          ];
+        if (
+          typeof viewConfig.locationLocks.locksByViewUid[viewUid] !== 'object'
+        ) {
+          this.locationLocks[viewUid] =
+            viewConfig.locationLocks.locksDict[
+              viewConfig.locationLocks.locksByViewUid[viewUid]
+            ];
+        } else {
+          // This means we need to link x and y axes separately.
+
+          // x-axis specific locks. The x-axis of this view is linked with an axis in another view.
+          if ('x' in viewConfig.locationLocks.locksByViewUid[viewUid]) {
+            const lockInfo =
+              viewConfig.locationLocks.locksDict[
+                viewConfig.locationLocks.locksByViewUid[viewUid].x.lock
+              ];
+            this.locationLocksAxisWise.x[viewUid] = {
+              lock: lockInfo,
+              axis: viewConfig.locationLocks.locksByViewUid[viewUid].x.axis, // The axis of another view, either 'x' or 'y'
+            };
+          }
+
+          // y-axis specific locks. The y-axis of this view is linked with an axis in another view.
+          if ('y' in viewConfig.locationLocks.locksByViewUid[viewUid]) {
+            const lockInfo =
+              viewConfig.locationLocks.locksDict[
+                viewConfig.locationLocks.locksByViewUid[viewUid].y.lock
+              ];
+            this.locationLocksAxisWise.y[viewUid] = {
+              lock: lockInfo,
+              axis: viewConfig.locationLocks.locksByViewUid[viewUid].y.axis, // The axis of another view, either 'x' or 'y'
+            };
+          }
+        }
       }
     }
 
@@ -4055,7 +4214,7 @@ class HiGlassComponent extends React.Component {
     this.setCenters[viewUid](centerX, centerY, k, false, animateTime);
   }
 
-  zoomToGene(viewUid, geneName, animateTime) {
+  zoomToGene(viewUid, geneName, padding, animateTime) {
     if (!(viewUid in this.setCenters)) {
       throw Error(
         `Invalid viewUid. Current uuids: ${Object.keys(this.setCenters).join(
@@ -4091,8 +4250,9 @@ class HiGlassComponent extends React.Component {
             this.state.views[viewUid].chromInfoPath,
             (loadedChromInfo) => {
               // using the absolution positions, zoom to the position near a gene
-              const startAbs = loadedChromInfo.chrToAbs([chr, txStart]);
-              const endAbs = loadedChromInfo.chrToAbs([chr, txEnd]);
+              const startAbs =
+                loadedChromInfo.chrToAbs([chr, txStart]) - padding;
+              const endAbs = loadedChromInfo.chrToAbs([chr, txEnd]) + padding;
 
               const [centerX, centerY, k] = scalesCenterAndK(
                 this.xScales[viewUid].copy().domain([startAbs, endAbs]),

package/app/scripts/HorizontalGeneAnnotationsTrack.js

@@ -141,6 +141,8 @@ function externalInitTile(track, tile, options) {
     const geneId = track.geneId(geneInfo, td.type);
     const strand = td.strand || geneInfo[5];
 
+    td.strand = td.strand || strand;
+
     let fill = plusStrandColor || DEFAULT_PLUS_STRAND_COLOR;
 
     if (strand === '-') {

package/app/scripts/TrackRenderer.js

@@ -604,7 +604,8 @@ class TrackRenderer extends React.Component {
       ])
       .range([initialXDomain[0], initialXDomain[1]]);
 
-    let startY; let endY;
+    let startY;
+    let endY;
     if (this.currentProps.centerWidth === 0) {
       // If the width of the center track is zero, we do not want to make startY and endY equal.
       startY = this.currentProps.paddingTop + this.currentProps.topHeight;

package/app/scripts/api.js

@@ -15,6 +15,7 @@ const forceUpdate = (self) => {
 };
 
 const createApi = function api(context, pubSub) {
+  /** @type {import('./HiGlassComponent').default} */
   const self = context;
 
   let pubSubs = [];
@@ -112,10 +113,38 @@ const createApi = function api(context, pubSub) {
       },
 
       /**
-       * Reload all of the tiles
+       * Reload all or specific tiles for viewId/trackId
+       *
+       * @param {array} target Should be an array of type
+       *                       ({ viewId: string, trackId: string } | string).
+       *                       If the array is just strings, it's interpreted
+       *                       as a list of views whose tracks to reload.
        */
-      reload() {
-        console.warn('Not implemented yet!');
+      reload(target) {
+        /** @type {{ viewId: string, trackId: string}[]} */
+        let tracks;
+        if (!target) {
+          tracks = self.iterateOverTracks();
+        } else {
+          tracks = target.flatMap((d) =>
+            typeof d === 'string' ? self.iterateOverTracksInView(d) : d,
+          );
+        }
+
+        for (const { viewId, trackId } of tracks) {
+          const selectedTrack = self.getTrackObject(viewId, trackId);
+          // iterate over childTracks if CombinedTrack
+          for (const track of selectedTrack.childTracks || [selectedTrack]) {
+            // reload tiles for tracks with tiles.
+            if (track.fetchedTiles) {
+              track.removeTiles(Object.keys(track.fetchedTiles));
+              track.fetching.clear();
+              track.refreshTiles();
+            }
+            // second argument forces re-render
+            track.rerender(track.options, true);
+          }
+        }
       },
 
       /**
@@ -473,13 +502,14 @@ const createApi = function api(context, pubSub) {
        *
        * @param {string} viewUid The identifier of the view to zoom
        * @param {string} geneName The name of gene symbol to search
+       * @param {string} padding The padding (base pairs) around a given gene for the navigation
        * @param {Number} animateTime The time to spend zooming to the specified location
        * @example
        * // Zoom to the location near 'MYC'
-       * hgApi.zoomToGene('view1', 'MYC', 2000);
+       * hgApi.zoomToGene('view1', 'MYC', 100, 2000);
        */
-      zoomToGene(viewUid, geneName, animateTime = 0) {
-        self.zoomToGene(viewUid, geneName, animateTime);
+      zoomToGene(viewUid, geneName, padding = 0, animateTime = 0) {
+        self.zoomToGene(viewUid, geneName, padding, animateTime);
       },
 
       /**

package/app/scripts/icons.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import { select } from 'd3-selection';
+import '../styles/ViewHeader.module.scss';
 
 export const COG = {
   id: 'cog',
@@ -369,3 +371,18 @@ export const svgArrowheadDomainsIcon = parser.parseFromString(
   arrowHeadDomainsStr,
   'text/xml',
 ).documentElement;
+
+export function SearchIcon({ theStyle }) {
+  return (
+    <svg
+      styleName={theStyle}
+      viewBox="0 0 12 13"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="none" stroke="#6c6c6c" strokeWidth="2">
+        <path d="M11.29 11.71l-4-4" />
+        <circle cx="5" cy="5" r="4" />
+      </g>
+    </svg>
+  );
+}