higlass 1.13.6 → 2.0.1

package/app/scripts/AddTrackDialog.jsx

@@ -67,6 +67,7 @@ export class AddTrackDialog extends React.Component {
     this.props.onTracksChosen(
       this.state.selectedTilesets,
       this.props.position,
+      this.props.extent,
       this.props.host,
     );
   }
@@ -86,6 +87,7 @@ export class AddTrackDialog extends React.Component {
     this.props.onTracksChosen(
       this.state.selectedTilesets,
       this.props.position,
+      this.props.extent,
       this.props.host,
     );
   }
@@ -172,7 +174,11 @@ export class AddTrackDialog extends React.Component {
           datatype={this.props.datatype}
           onDoubleClick={this.handleTilesetPickerDoubleClick.bind(this)}
           onTracksChosen={(value) =>
-            this.props.onTracksChosen(value, this.props.position)
+            this.props.onTracksChosen(
+              value,
+              this.props.position,
+              this.props.extent,
+            )
           }
           orientation={orientation}
           selectedTilesetChanged={this.selectedTilesetsChanged.bind(this)}
@@ -223,6 +229,7 @@ AddTrackDialog.defaultProps = {
 
 AddTrackDialog.propTypes = {
   datatype: PropTypes.string,
+  extent: PropTypes.string,
   host: PropTypes.string,
   onCancel: PropTypes.func.isRequired,
   onTracksChosen: PropTypes.func.isRequired,

package/app/scripts/AddTrackPositionMenu.jsx

@@ -42,11 +42,32 @@ function AddTrackPositionMenu(props) {
             >
               left
             </td>
-            <td
-              className={classes['add-track-position-middle-middle']}
-              onClick={() => props.onTrackPositionChosen('center')}
-            >
-              center
+            <td className={classes['add-track-position-middle-middle']}>
+              <span
+                onClick={() => props.onTrackPositionChosen('center')}
+                className={classes['add-track-position-middle-middle-full']}
+                data-testid="add-track-center"
+              >
+                center
+              </span>
+              <span
+                onClick={() =>
+                  props.onTrackPositionChosen('center', 'upper-right')
+                }
+                className={
+                  classes['add-track-position-middle-middle-upper-right']
+                }
+                data-testid="add-track-upper-right"
+              />
+              <span
+                onClick={() =>
+                  props.onTrackPositionChosen('center', 'lower-left')
+                }
+                className={
+                  classes['add-track-position-middle-middle-lower-left']
+                }
+                data-testid="add-track-lower-left"
+              />
             </td>
             <td
               className={classes['add-track-position-middle-right']}

package/app/scripts/Annotations1dTrack.js

@@ -1,271 +1,110 @@
 // @ts-nocheck
-import { color } from 'd3-color';
-import PixiTrack from './PixiTrack';
+import polygonArea from 'area-polygon';
+import classifyPoint from 'robust-point-in-polygon';
+
+import BedLikeTrack, { polyToPoly } from './BedLikeTrack';
+
+/** Find out which rects are under a point.
+ *
+ * @param  {track} The track object
+ * @param  {x} x position to check (relative to track)
+ * @param  {y} y position to check (relative to track)
+ * @return {[]} An array of drawnRects that are under that point
+ */
+export const rectsAtPoint = (track, x, y) => {
+  const drawnRects = Object.values(track.drawnRects);
+  const point = [x, y];
+  const payloads = [];
+  const g = track.rectGraphics;
+
+  for (const drawnRect of drawnRects) {
+    // copy the rect because polyToPoly is destructive
+    const rect = drawnRect[0].slice(0);
+
+    const poly = polyToPoly(
+      rect,
+      g.scale.x,
+      g.position.x,
+      g.scale.y,
+      g.position.y,
+    );
+    const area = polygonArea(poly);
+
+    if (classifyPoint(poly, point) === -1) {
+      const payload = drawnRect[1];
+      payload.area = area;
+
+      payloads.push(payload);
+    }
+  }
 
-// Maximum delay in ms between mousedown and mouseup that is registered as a
-// click. Note we need to use mousedown and mouseup as PIXI doesn't recognize
-// click events with out current setup. Since most UIs treat long clicks as
-// either something special or a cancelation we follow best practices and
-// implement a threshold on the delay as well.
-import { GLOBALS, MAX_CLICK_DELAY } from './configs';
+  return payloads;
+};
 
-class Annotations1dTrack extends PixiTrack {
+class Annotations1dTrack extends BedLikeTrack {
   constructor(context, options, isVertical) {
     super(context, options);
-
-    this.pubSub = context.pubSub;
-    this.options = options;
-    this.isVertical = isVertical;
-
-    this.rects = {};
-
-    this.defaultColor = color('red');
   }
 
-  draw() {
-    const globalMinRectWidth =
-      typeof this.options.minRectWidth !== 'undefined'
-        ? this.options.minRectWidth
-        : 10;
-
-    const globalFill =
-      typeof this.options.fill !== 'undefined'
-        ? color(this.options.fill)
-        : this.defaultColor;
-
-    const globalFillOpacity =
-      typeof this.options.fillOpacity !== 'undefined'
-        ? +this.options.fillOpacity
-        : 0.2;
-
-    const globalStroke =
-      typeof this.options.stroke !== 'undefined'
-        ? color(this.options.stroke)
-        : this.defaultColor;
-
-    const globalStrokeWidth =
-      typeof this.options.strokeWidth !== 'undefined'
-        ? +this.options.strokeWidth
-        : 1;
-
-    const globalStrokeOpacity =
-      typeof this.options.strokeOpacity !== 'undefined'
-        ? +this.options.strokeOpacity
-        : 0;
-
-    let strokePos;
-    if (this.options.strokePos?.length) {
-      strokePos = Array.isArray(this.options.strokePos)
-        ? this.options.strokePos
-        : [this.options.strokePos];
+  rerender(options, force) {
+    if (options && options.projectUid !== this.options.projectUid) {
+      // we're filtering by a new project id so we have to
+      // re-fetch the tiles
+      this.options = options;
+      this.fetchedTiles = {};
+      this.refreshTiles();
+      return;
     }
 
-    super.draw();
-    const graphics = this.pMain;
-    graphics.clear();
-
-    // The time stamp is used to keep track which rectangles have been drawn per
-    // draw call. Each rectangle previously drawn that is not visible anymore
-    // (i.e., is not drawn in the current draw call) will be removed at the end
-    // by checking against the time stamp.
-    const timeStamp = performance.now();
-
-    // Regions have to follow the following form:
-    // start, end, fill, stroke, fillOpacity, strokeOpcaity, min-size
-    // If `color-line` is not given, `color-fill` is used
-    this.options.regions.forEach((region) => {
-      const id = `${region[0]}-${region[1]}`;
-
-      if (!this.rects[id]) {
-        this.rects[id] = { graphics: new GLOBALS.PIXI.Graphics() };
-        graphics.addChild(this.rects[id].graphics);
-      }
-
-      this.rects[id].timeStamp = timeStamp;
-
-      const fill = color(region[2]) || globalFill;
-      let stroke = color(region[3]) || globalStroke;
-
-      if (!stroke) {
-        stroke = fill;
-      }
-
-      const fillHex = GLOBALS.PIXI.utils.rgb2hex([
-        fill.r / 255.0,
-        fill.g / 255.0,
-        fill.b / 255.0,
-      ]);
-      const strokeHex = GLOBALS.PIXI.utils.rgb2hex([
-        stroke.r / 255.0,
-        stroke.g / 255.0,
-        stroke.b / 255.0,
-      ]);
-
-      if (strokePos) {
-        graphics.lineStyle(1, strokeHex, 0);
-        graphics.beginFill(strokeHex, +region[5] || globalStrokeOpacity);
-      } else {
-        graphics.lineStyle(
-          globalStrokeWidth,
-          strokeHex,
-          +region[5] || globalStrokeOpacity,
-        );
-        graphics.beginFill(fillHex, +region[4] || globalFillOpacity);
-      }
-
-      const scale = this.isVertical ? this._yScale : this._xScale;
-
-      let start = scale(+region[0]);
-      const end = scale(+region[1]);
-
-      let width = end - start;
-
-      const minRectWidth =
-        typeof region[6] !== 'undefined' ? region[6] : globalMinRectWidth;
-
-      if (width < minRectWidth) {
-        // this region is too small to draw so center it on the location
-        // where it would be drawn
-        start = (start + end) / 2 - minRectWidth / 2;
-        width = minRectWidth;
-      }
-
-      if (strokePos) {
-        graphics.lineStyle(1, strokeHex, 0);
-        graphics.beginFill(strokeHex, +region[5] || globalStrokeOpacity);
-
-        strokePos.forEach((pos) => {
-          if (pos === 'top' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(0, start, globalStrokeWidth, width);
-            } else {
-              graphics.drawRect(start, 0, width, globalStrokeWidth);
-            }
-          }
-
-          if (pos === 'right' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                0,
-                start,
-                this.dimensions[0],
-                globalStrokeWidth,
-              );
-            } else {
-              graphics.drawRect(
-                start,
-                0,
-                globalStrokeWidth,
-                this.dimensions[1],
-              );
-            }
-          }
-
-          if (pos === 'bottom' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                this.dimensions[0] - globalStrokeWidth,
-                start,
-                globalStrokeWidth,
-                width,
-              );
-            } else {
-              graphics.drawRect(
-                start,
-                this.dimensions[1] - globalStrokeWidth,
-                width,
-                globalStrokeWidth,
-              );
-            }
-          }
-
-          if (pos === 'left' || pos === 'around') {
-            if (this.isVertical) {
-              graphics.drawRect(
-                0,
-                start + width - globalStrokeWidth,
-                this.dimensions[0],
-                globalStrokeWidth,
-              );
-            } else {
-              graphics.drawRect(
-                start + width - globalStrokeWidth,
-                0,
-                globalStrokeWidth,
-                this.dimensions[1],
-              );
-            }
-          }
-        });
-      } else {
-        graphics.lineStyle(
-          globalStrokeWidth,
-          strokeHex,
-          +region[5] || globalStrokeOpacity,
-        );
-      }
-
-      // Make annotation clickable
-      this.rects[id].graphics.clear();
-      this.rects[id].graphics.interactive = true;
-      this.rects[id].graphics.buttonMode = true;
-
-      graphics.beginFill(fillHex, +region[4] || globalFillOpacity);
-      if (this.isVertical) {
-        graphics.drawRect(0, start, this.dimensions[0], width);
-        this.rects[id].graphics.hitArea = new GLOBALS.PIXI.Rectangle(
-          0,
-          start,
-          this.dimensions[0],
-          width,
-        );
-      } else {
-        graphics.drawRect(start, 0, width, this.dimensions[1]);
-        this.rects[id].graphics.hitArea = new GLOBALS.PIXI.Rectangle(
-          start,
-          0,
-          width,
-          this.dimensions[1],
-        );
-      }
+    super.rerender(options, force);
+  }
 
-      this.rects[id].graphics.mousedown = () => {
-        this.rects[id].mouseDownTime = performance.now();
-      };
+  /*
+   * The local tile identifier
+   */
+  tileToLocalId(tile) {
+    // tile contains [zoomLevel, xPos, yPos]
+    return this.tileToRemoteId(tile);
+  }
 
-      this.rects[id].graphics.mouseup = (event) => {
-        if (
-          performance.now() - this.rects[id].mouseDownTime <
-          MAX_CLICK_DELAY
-        ) {
-          this.pubSub.publish('app.click', {
-            type: 'annotation',
-            event,
-            payload: region,
-          });
-        }
-      };
-    });
+  /**
+   * The tile identifier used on the server
+   */
+  tileToRemoteId(tile) {
+    // tile contains [zoomLevel, xPos, yPos]
+    let tileId = `${tile.join('.')}`;
+
+    if (this.options.projectUid) {
+      // include the projectUid in the options
+      // (resgen feature)
+      tileId = `${tileId}.ui=${this.options.projectUid}`;
+    }
 
-    // Remove outdated rects, i.e., rects whose time stamp is not the current
-    // time stamp stored above.
-    Object.values(this.rects)
-      .filter((rect) => rect.timeStamp !== timeStamp)
-      .forEach((rect) => graphics.removeChild(rect.graphics));
+    return tileId;
   }
 
-  setPosition(newPosition) {
-    super.setPosition(newPosition);
+  /**
+   * @param  {x} x position of the evt relative to the track
+   * @param  {y} y position of the evt relative to the track
+   */
+  click(x, y) {
+    const rects = rectsAtPoint(this, x, y);
+
+    if (!rects.length) {
+      this.selectRect(null);
+    } else {
+      this.selectRect(rects[0].value.uid);
+    }
 
-    this.pMain.position.y = this.position[1];
-    this.pMain.position.x = this.position[0];
+    return {
+      type: '1d-annotations',
+      event: null,
+      payload: rects,
+    };
   }
 
-  zoomed(newXScale, newYScale) {
-    this.xScale(newXScale);
-    this.yScale(newYScale);
-
-    this.draw();
+  render() {
+    super.render();
   }
 }
 

package/app/scripts/Annotations2dTrack.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+
 import createPubSub from 'pub-sub-es';
 
 import TiledPixiTrack from './TiledPixiTrack';
@@ -418,7 +419,10 @@ class Annotations2dTrack extends TiledPixiTrack {
       prevUid = this.selectedAnno.uid;
     }
 
-    this.selectedAnno = { graphics, uid };
+    this.selectedAnno = {
+      graphics,
+      uid,
+    };
     this.focus(graphics, viewPos, uid);
 
     if (this.options.onSelect && !silent) {
@@ -467,7 +471,10 @@ class Annotations2dTrack extends TiledPixiTrack {
 
     this.visibleAndFetchedTiles()
       .filter((tile) => tile.tileData?.length)
-      .map((tile) => ({ graphics: tile.graphics, td: tile.tileData }))
+      .map((tile) => ({
+        graphics: tile.graphics,
+        td: tile.tileData,
+      }))
       .forEach(({ td, graphics }) => {
         const gTile = document.createElement('g');
 

package/app/scripts/Autocomplete.jsx

@@ -1,9 +1,7 @@
 // @ts-nocheck
 
-import scrollIntoView from 'dom-scroll-into-view';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 
 const _debugStates = [];
 
@@ -142,13 +140,7 @@ class Autocomplete extends React.Component {
   maybeScrollItemIntoView() {
     if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
       const itemNode = this.refs[`item-${this.state.highlightedIndex}`];
-
-      const menuNode = this.refs.menu;
-      if (itemNode) {
-        scrollIntoView(findDOMNode(itemNode), findDOMNode(menuNode), {
-          onlyScrollIfNeeded: true,
-        });
-      }
+      itemNode?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }