DM-7273: Mouse readout cleanup and bug fixes

robyww · robyww · commit d6721c423ead · 2016-09-15T16:38:35.000-07:00
- Mouse readout not longer will randomly switch to the bigger one.
 - The mouse readout will not blink as you go in and out of an image
 - Clean up flow of mouse readout saga
 - MouseReadoutWatch includes description of empty flux fields
 - Readout ui layout has been cleaned up: minimal is smaller, three color is tighter, standard api is cleaner
 - Readout now correctly shows empty flux display
diff --git a/src/firefly/js/api/ApiUtilImage.jsx b/src/firefly/js/api/ApiUtilImage.jsx
@@ -4,6 +4,7 @@
 
 import React from 'react';
 import {take,race,call} from 'redux-saga/effects';
+import {has} from 'lodash';
 import {MouseState} from '../visualize/VisMouseSync.js';
 import ImagePlotCntlr, {visRoot, ExpandType} from '../visualize/ImagePlotCntlr.js';
 import {primePlot} from '../visualize/PlotViewUtil.js';
@@ -59,20 +60,23 @@ export function getPrimePlot(plotId) {
     return primePlot(visRoot(), plotId);
 }
 
+
+
+var isInit= false;
 /**
- * @summary  initialize the auto readout. Must be call once at the begging to get the popup readout running.
+ * @summary  initialize the auto readout. Can only be called once at the begging to get the popup readout running.
+ * Called internally during first image plot.
  * @param {object} ReadoutComponent - either a PopupMouseReadoutMinimal or PopupMouseReadoutFull
  * @param {object} props - a list of the properties
  * @public
  * @function initAutoReadout
  * @memberof firefly.util.image
  */
 export function initAutoReadout(ReadoutComponent= DefaultApiReadout,
-         //   props={MouseReadoutComponent:PopupMouseReadoutMinimal, showThumb:false,showMag:false}){
       props={MouseReadoutComponent:PopupMouseReadoutFull, showThumb:true,showMag:true } ){
-
-
+    if (isInit) return;
     dispatchAddSaga(autoReadoutVisibility, {ReadoutComponent,props});
+    isInit= true;
 }
 
 
@@ -138,7 +142,7 @@ function *autoReadoutVisibility({ReadoutComponent,props}) {
                            mouse: call(mouseUpdatePromise),
                            timer: call(delay, 3000)
                          });
-            if ((!winner.expandedChange || !winner.mouse) && !inDialog && !isLockByClick(readoutRoot()) && !isAutoReadIsLocked(readoutRoot())) {
+            if ((has(winner,'timer')) && !inDialog && !isLockByClick(readoutRoot()) && !isAutoReadIsLocked(readoutRoot())) {
                 hideReadout();
             }
             else {
diff --git a/src/firefly/js/visualize/saga/MouseReadoutWatch.js b/src/firefly/js/visualize/saga/MouseReadoutWatch.js
@@ -2,17 +2,17 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import {take,race,call} from 'redux-saga/effects';
-import {isEmpty, get, debounce} from 'lodash';
-import ImagePlotCntlr, {visRoot} from '../ImagePlotCntlr.js';
+import {race,call} from 'redux-saga/effects';
+import {get} from 'lodash';
+import {visRoot} from '../ImagePlotCntlr.js';
 import {clone} from '../../util/WebUtil.js';
 import {readoutRoot, dispatchReadoutData, makeValueReadoutItem, makePointReadoutItem,
         makeDescriptionItem, isLockByClick} from '../MouseReadoutCntlr.js';
 import {callGetFileFlux} from '../../rpc/PlotServicesJson.js';
 import {Band} from '../Band.js';
 import {MouseState} from '../VisMouseSync.js';
 import {isBlankImage} from '../WebPlot.js';
-import {primePlot, getPlotStateAry, getActivePlotView} from '../PlotViewUtil.js';
+import {primePlot, getPlotStateAry, getPlotViewById} from '../PlotViewUtil.js';
 import {mouseUpdatePromise} from '../VisMouseSync.js';
 
 
@@ -22,41 +22,47 @@ const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export function* watchReadout() {
 
-    var lockByClick= false;
+    var lockByClick;
     var mouseCtx;
     yield call(mouseUpdatePromise);
 
     mouseCtx = yield call(mouseUpdatePromise);
 
+    var getNextWithFlux;
+    var threeColor= false;
+    var plotView;
 
 
     while (true) {
 
+        getNextWithFlux= false;
         lockByClick= isLockByClick(readoutRoot());
-        var {plotId,worldPt,screenPt,imagePt,mouseState}= mouseCtx;
+        const {plotId,worldPt,screenPt,imagePt,mouseState}= mouseCtx;
 
-        if (!usePayload(mouseState,lockByClick)) {
-            if (!lockByClick) {
-                dispatchReadoutData(plotId, {});
-            }
-            mouseCtx = yield call(mouseUpdatePromise);
-            continue;
-        }
+        if (usePayload(mouseState,lockByClick)) {
+            plotView= getPlotViewById(visRoot(), plotId);
+            var plot= primePlot(plotView);
 
-        const plotView= getActivePlotView(visRoot());
-        var plot= primePlot(plotView);
+            if (plot) {
+                var readout= makeReadoutWithFlux(makeReadout(plot,worldPt,screenPt,imagePt), plot, null, plot.plotState.threeColor);
+                threeColor= plot.plotState.isThreeColor();
+                dispatchReadoutData(plotId,readout, threeColor);
 
-        var readout= makeReadout(plot,worldPt,screenPt,imagePt);
-        const threeColor= plot.plotState.isThreeColor();
-        dispatchReadoutData(plotId,readout, threeColor);
+                getNextWithFlux= !isBlankImage(plot);
+            }
+        }
+        else if (!lockByClick) {
+            dispatchReadoutData(plotId, {});
+        }
 
-        if (isBlankImage(plot)) {
+        if (getNextWithFlux) { // get the next mouse event or the flux
+            mouseCtx= lockByClick ? yield call(processImmediateFlux,readout,plotView,imagePt,threeColor) :
+                                    yield call(processDelayedFlux,readout,plotView,imagePt,threeColor);
+        }
+        else { // get the next mouse event
             mouseCtx = yield call(mouseUpdatePromise);
-            continue;
         }
 
-        mouseCtx= lockByClick ? yield call(processImmediateFlux,readout,plotView,imagePt,threeColor) :
-                                yield call(processDelayedFlux,readout,plotView,imagePt,threeColor);
     }
 }
 
@@ -123,11 +129,11 @@ function usePayload(mouseState, lockByClick) {
 
 /**
  *
- * @param plot
- * @param worldPt
- * @param screenPt
- * @param imagePt
- * @return {{worldPt: *, screenPt: *, imagePt: *, threeColor: (*|boolean), title: *, pixel: ({title, value, unit, precision}|{title: *, value: *, unit: *, precision: *})}}
+ * @param {WebPlot} plot
+ * @param {WorldPt} worldPt
+ * @param {ScreenPt} screenPt
+ * @param {ImagePt} imagePt
+ * @return {{worldPt: *, screenPt: *, imagePt: *, threeColor: (boolean), title: *, pixel: ({title, value, unit, precision}|{title: *, value: *, unit: *, precision: *})}}
  */
 function makeReadout(plot, worldPt, screenPt, imagePt) {
     return {
@@ -145,26 +151,28 @@ function makeReadout(plot, worldPt, screenPt, imagePt) {
 /**
  * 
  * @param readout
- * @param plot
+ * @param {WebPlot} plot
  * @param fluxResult
  * @param threeColor
  * @return {*}
  */
 function makeReadoutWithFlux(readout, plot, fluxResult,threeColor) {
     readout= clone(readout);
-    const fluxData= getFlux(fluxResult,plot);
+    const fluxData= fluxResult ? getFlux(fluxResult,plot) : null;
     const labels= getFluxLabels(plot);
     if (threeColor) {
         const bands = plot.plotState.getBands();
         bands.forEach( (b,idx) => readout[b.key+'Flux']=
-            makeValueReadoutItem(labels[idx], fluxData[idx].value,fluxData[idx].unit, 6));
+            makeValueReadoutItem(labels[idx], get(fluxData,[idx,'value']),get(fluxData,[idx,'unit']), 6 ));
     }
     else {
-        readout.nobandFlux= makeValueReadoutItem(labels[0], fluxData[0].value,fluxData[0].unit, 6);
+        readout.nobandFlux= makeValueReadoutItem(labels[0], get(fluxData,[0,'value']),get(fluxData,[0,'unit']), 6);
     }
-    const oIdx= fluxData.findIndex( (d) => d.imageOverlay);
-    if (oIdx>-1) {
-        readout.imageOverlay= makeValueReadoutItem('mask', fluxData[oIdx].value, fluxData[oIdx].unit, 0);
+    if (fluxData) {
+        const oIdx= fluxData.findIndex( (d) => d.imageOverlay);
+        if (oIdx>-1) {
+            readout.imageOverlay= makeValueReadoutItem('mask', fluxData[oIdx].value, fluxData[oIdx].unit, 0);
+        }
     }
     return readout;
 }
diff --git a/src/firefly/js/visualize/ui/DefaultApiReadout.jsx b/src/firefly/js/visualize/ui/DefaultApiReadout.jsx
@@ -14,10 +14,10 @@ import {ThumbnailView} from './ThumbnailView.jsx';
 import {MagnifiedView} from './MagnifiedView.jsx';
 
 var fullStyle= {
-    width: 680,
-    height: 70,
-    minWidth: 680,
-    minHeight:70,
+    // width: 680,
+    // height: 70,
+    // minWidth: 680,
+    // minHeight:70,
     display: 'inline-block',
     position: 'relative',
     verticalAlign: 'top',
@@ -27,10 +27,10 @@ var fullStyle= {
 };
 
 var minimalStyle= {
-    width: 360,
-    height: 70,
-    minWidth: 360,
-    minHeight:70,
+    // width: 360,
+    // height: 70,
+    // minWidth: 360,
+    // minHeight:70,
     display: 'inline-block',
     position: 'relative',
     verticalAlign: 'top',
@@ -86,9 +86,9 @@ export class DefaultApiReadout extends Component {
             const style = MouseReadoutComponent &&  MouseReadoutComponent.name==='PopupMouseReadoutMinimal'?minimalStyle:fullStyle;
             return (
 
-                <div style={{display:'inline-block', float:'right', whiteSpace:'nowrap'}}>
+                <div style={{display:'flex',flexWrap:'nowrap'}}>
                     <div style={style}>
-                        <div style={{position:'absolute', color:'black'}}>
+                        <div style={{position:'relative', color:'black', height:'100%'}}>
                             <MouseReadoutComponent readout={readout} showMag={ showMag} showThumb={showThumb}/>
                         </div>
                     </div>
diff --git a/src/firefly/js/visualize/ui/MouseReadout.jsx b/src/firefly/js/visualize/ui/MouseReadout.jsx
@@ -30,7 +30,7 @@ const rS = {
     whiteSpace: 'nowrap',
     overflow: 'hidden'
 };
-const EMPTY = <div style={rS}></div>;
+const EMPTY = <div style={rS}/>;
 const EMPTY_READOUT = '';
 const coordinateMap = {
     galactic: CoordinateSys.GALACTIC,
@@ -194,15 +194,15 @@ export function getFluxInfo(sndReadout){
     }
     var fluxValueArrays=[];
     var fluxLabelArrays=[];
-    var fluxValue,  formatStr;
+    var fluxValue;
 
     for (let i = 0; i < fluxObj.length; i++) {
         if (!isNaN(fluxObj[i].value )) {
             fluxValue = (fluxObj[i].value < 1000) ? `${myFormat(fluxObj[i].value, fluxObj[i].precision)}` : fluxObj[i].value.toExponential(6).replace('e+', 'E');
             if (fluxObj[i].unit && !isNaN(fluxObj[i].value)) fluxValue+= ` ${fluxObj[i].unit}`;
             fluxValueArrays.push(fluxValue);
-            fluxLabelArrays.push(fluxObj[i].title);
         }
+        fluxLabelArrays.push(fluxObj[i].title);
      }
 
     if (fluxLabelArrays.length<3) { //fill with empty
@@ -231,7 +231,7 @@ export function  getMouseReadout(readoutItems, toCoordinateName) {
     var wpt = readoutItems.worldPt;
     if (!wpt.value) return;
 
-    var result,fStr, obj;
+    var result, obj;
     var {coordinate, type} = getCoordinateMap(toCoordinateName);
     if (coordinate) {
         var ptInCoord = VisUtil.convert(wpt.value, coordinate);
diff --git a/src/firefly/js/visualize/ui/PopupMouseReadoutFull.jsx b/src/firefly/js/visualize/ui/PopupMouseReadoutFull.jsx
diff --git a/src/firefly/js/visualize/ui/PopupMouseReadoutMinimal.jsx b/src/firefly/js/visualize/ui/PopupMouseReadoutMinimal.jsx
