static/js/miniplot.js
/**
 * Mini plot mouse move event
 * @function miniPlotMouseMove
 * @param {Object} e - event
 * @param {Object} mo - main object
 * @description There are three scenarios:
 * 1. No mini plot is displayed. Nothing happens.
 * 2. The user is moving the mouse over the mini plot without clicking. The bar
 * in the histogram being hovered will be highlighted.
 * 3. The user presses the left button of the mouse, holds it and moves around.
 * The bars within the range will be highlighted.
 */
Mini plot mouse move event
@function miniPlotMouseMove
@param {Object} e - event
@param {Object} mo - main object
@description There are three scenarios:
1. No mini plot is displayed. Nothing happens.
2. The user is moving the mouse over the mini plot without clicking. The bar
in the histogram being hovered will be highlighted.
3. The user presses the left button of the mouse, holds it and moves around.
The bars within the range will be highlighted.
Mini plot mouse move event @function miniPlotMouseMove @param { Object } e - event @param { Object } mo - main object @description There are three scenarios : 1 . No mini plot is displayed . Nothing happens . 2 . The user is moving the mouse over the mini plot without clicking . The bar in the histogram being hovered will be highlighted . 3 . The user presses the left button of the mouse holds it and moves around . The bars within the range will be highlighted .
function miniPlotMouseMove(e, mo) {
  if (mo.mini.field === null) return;
  if (mo.mini.hist === null) return;
  if (!mo.cache.npick) return;
  const canvas = mo.mini.canvas;
  const rect = canvas.getBoundingClientRect();
  const w = canvas.width,
        h = canvas.height;
  const x = (e.clientX - rect.left) / (rect.right - rect.left) * w;
  let bin0, bin1;
  const nbin = mo.mini.nbin;
  let i = Math.floor((x - 10) / (w - 20) * nbin);
  if (e.buttons !== 1) {
    if ((i < 0) || (i >= nbin)) i = null;
    if ((i === mo.mini.bin0) && (i === mo.mini.bin1)) return;
    bin0 = bin1 = i;
    mo.mini.bin0 = i;
    mo.mini.bin1 = i;
    updateMiniPlot(mo, true);
  }
  else {
    let j = Math.floor((mo.mini.drag - 10) / (w - 20) * nbin);
    bin0 = Math.max(Math.min(i, j), 0);
    bin1 = Math.min(Math.max(i, j), nbin - 1);
    const skip = ((bin0 === mo.mini.bin0) && (bin1 === mo.mini.bin1)) ?
      true : false;
    mo.mini.bin0 = bin0;
    mo.mini.bin1 = bin1;
    updateMiniPlot(mo, true, x);
    if (skip) return;
  }
  const tip = byId('legend-tip');
  tip.classList.add('hidden');
  if (bin0 === null) return;
  let n = 0;
  for (i = bin0; i <= bin1; i++) {
    n += mo.mini.hist[i];
  }
  let left = mo.mini.edges[bin0],
      right = mo.mini.edges[bin1 + 1];
  const icol = mo.mini.field;
  left = formatValueLabel(left, icol, 3, false, mo);
  right = formatValueLabel(right, icol, 3, true, mo);
  byId('legend-value').innerHTML = `${n}<br><small>${left} to 
    ${right}</small>`;
  tip.style.left = Math.round((10 + ((bin0 + bin1) / 2 + 0.5) * (w - 20) /
    nbin) / w * (rect.right - rect.left) + rect.left) + 'px';
  tip.style.top = Math.round(rect.bottom - 5) + 'px';
  byId('legend-circle').classList.add('hidden');
  tip.classList.remove('hidden');
}
function miniPlotMouseMove ( e , mo ) { if ( mo . mini . field === null ) return ; if ( mo . mini . hist === null ) return ; if ( ! mo . cache . npick ) return ; const canvas = mo . mini . canvas ; const rect = canvas . getBoundingClientRect ( ) ; const w = canvas . width , h = canvas . height ; const x = ( e . clientX - rect . left ) / ( rect . right - rect . left ) * w ; let bin0 , bin1 ; const nbin = mo . mini . nbin ; let i = Math . floor ( ( x - 10 ) / ( w - 20 ) * nbin ) ; if ( e . buttons !== 1 ) { if ( ( i < 0 ) || ( i >= nbin ) ) i = null ; if ( ( i === mo . mini . bin0 ) && ( i === mo . mini . bin1 ) ) return ; bin0 = bin1 = i ; mo . mini . bin0 = i ; mo . mini . bin1 = i ; updateMiniPlot ( mo , true ) ; } else { let j = Math . floor ( ( mo . mini . drag - 10 ) / ( w - 20 ) * nbin ) ; bin0 = Math . max ( Math . min ( i , j ) , 0 ) ; bin1 = Math . min ( Math . max ( i , j ) , nbin - 1 ) ; const skip = ( ( bin0 === mo . mini . bin0 ) && ( bin1 === mo . mini . bin1 ) ) ? true : false ; mo . mini . bin0 = bin0 ; mo . mini . bin1 = bin1 ; updateMiniPlot ( mo , true , x ) ; if ( skip ) return ; } const tip = byId ( 'legend-tip' ) ; tip . classList . add ( 'hidden' ) ; if ( bin0 === null ) return ; let n = 0 ; for ( i = bin0 ; i <= bin1 ; i ++ ) { n += mo . mini . hist [ i ] ; } let left = mo . mini . edges [ bin0 ] , right = mo . mini . edges [ bin1 + 1 ] ; const icol = mo . mini . field ; left = formatValueLabel ( left , icol , 3 , false , mo ) ; right = formatValueLabel ( right , icol , 3 , true , mo ) ; byId ( 'legend-value' ) . innerHTML = ` ${ n } ${ left } ${ right } ` ; tip . style . left = Math . round ( ( 10 + ( ( bin0 + bin1 ) / 2 + 0.5 ) * ( w - 20 ) / nbin ) / w * ( rect . right - rect . left ) + rect . left ) + 'px' ; tip . style . top = Math . round ( rect . bottom - 5 ) + 'px' ; byId ( 'legend-circle' ) . classList . add ( 'hidden' ) ; tip . classList . remove ( 'hidden' ) ; }
Mini plot mouse move event
 @function miniPlotMouseMove
 @param {Object} e - event
 @param {Object} mo - main object
 @description There are three scenarios:
 1.
Mini plot mouse move event @function miniPlotMouseMove @param { Object } e - event @param { Object } mo - main object @description There are three scenarios : 1 .
// skip if no mini plot is displayed // find mouse position in mini plot // first and last bin indices // determine which bin the mouse is over // mouse over to display info of single bin // if before first bin or after last bin, ignore // if same as saved bin status, skip // save bin status // update mini plot to highlight this bin // hold mouse key to select a range of bins // determine the other bin // determine first and last bins // if same as saved bin status, still update plot but keep tooltip // save bin status // update mini plot to highlight a range of bins // reset tooltip // determine size of bin(s) // determine range of bin(s) // format range and size of bin(s) // determine tooltip position // display bin size and range in tooltip