Skip to content

DM-7190: fix the issues related to add region, highlight box while zooming the image, and update the dispatch functions related to add/remove region entry.… #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 23, 2016
Merged

DM-7190: fix the issues related to add region, highlight box while zooming the image, and update the dispatch functions related to add/remove region entry.… #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9fb5cd4
DM-7190: fix the issues related to add region, highlight box size whi…
Aug 12, 2016
e851c18
update jupyter notebook test files
Aug 22, 2016
53ae4fa
Make the rendering of the highlight box consistent while zooming the …
Aug 23, 2016
6925a18
fixed draw layer redraw bug on certain zoom cases
robyww Aug 23, 2016
f7172c1
fix dispatch action to delete layer in saga for removing region entry
Aug 23, 2016
731bd66
Merge branch 'DM-7190-RegionBugs2' of https://github.com/Caltech-IPAC…
Aug 23, 2016
99f1bfb
clean up RegionPlot.js
Aug 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions src/firefly/html/demo/ffapi-highlevel-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
</div>
<div>
<a href='javascript:addRegionEntry()'>Add Region Entry </a>
<select id='regionEntry_add'><option selected disabled>Regiion Layers:</option></select>
<select id='regionEntry_add'><option selected disabled>Region Layers:</option></select>
<a href='javascript:removeRegionEntry()'>Remove Region Entry</a>
<select id='regionEntry_remove'><option selected disabled>Regiion Layers:</option></select>
<div>
Expand Down Expand Up @@ -266,6 +266,7 @@
'PHYSICAL;box (360, 220, 60, 60, 0) #color=orange text={ph3}'
];

window.emptyRegion = '';
window.regionAry2 = [
'J2000',
'boxcircle point 202.45 47.262 # color=red text="pt boxcircle 6" delete=0',
Expand All @@ -289,17 +290,19 @@
'image; box 280 200 72 72 0 # color=cyan text={right syntax}'
];

var moreRegionAry = [

window.moreRegionAry = [
'image;ellipse 100 100 20p 40p 30p 60p 40p 80p 20 # color=green text={ellipseannulus 2}',
'J2000;ellipse 202.55556, 47.188286 20p 40p 0i # color=#48f text={ellipse 1} width=10',
'image;box 130 100 20p 40p 30p 50p 70p 100p 30 # color=red text={slanted box annulus 3}'
'image;box 130 100 20p 40p 30p 50p 70p 100p 30 # color=red text={slanted box annulus 3}',
'j2000;box(47.247072i, 180.445347i, 50p, 20p, 0) # color=cyan width=6 text="box 12-3"'
];

window.regions = [];
window.regionId = window.regions.length;

document.getElementById('regionLayerContent').value = window.regionAry.join('\n');
document.getElementById('moreRegionContent').value = moreRegionAry.join('\n');
document.getElementById('moreRegionContent').value = window.moreRegionAry.join('\n');
//document.getElementById('createRegionId').placeholder = "Region_Plot_" + (window.regionId+1);
updateRegionLayerList();
};
Expand All @@ -311,14 +314,19 @@
window.regionId++;
layerId = "Region_Plot_" + window.regionId;
document.getElementById('createRegionId').value = layerId;

}

if (window.regionId === 3) {
if (window.regionId === 0) {
document.getElementById('regionLayerContent').value = window.emptyRegion;
} else if (window.regionId === 3) { // region with error
document.getElementById('regionLayerContent').value = window.regionWithError.join('\n');
} else if (window.regionId > 1) {
document.getElementById('regionLayerContent').value = window.regionAry2.join('\n');
} else {
} else if (window.regionId === 1) { // short region list
document.getElementById('regionLayerContent').value = window.regionAry.join('\n');
} else if (window.regionId === 2) { // short region list for removing all
document.getElementById('regionLayerContent').value = window.moreRegionAry.join('\n');
} else if (window.regionId > 3) { // longer region list
document.getElementById('regionLayerContent').value = window.regionAry2.join('\n');
}

var regionAry = document.getElementById('regionLayerContent').value.split('\n').filter(function(r) { return (r.length !== 0);});
Expand Down Expand Up @@ -385,8 +393,12 @@

selectBox.getElementsByTagName('option')[0].selected = 'selected';

firefly.action.dispatchAddRegionEntry(selectedLayerId, addRegions);
firefly.action.dispatchAddRegionEntry(selectedLayerId, addRegions, window.ffViewer.dispatch);
firefly.action.dispatchAddRegionEntry(selectedLayerId, addRegions, 'regiontest');
if (selectedLayerId === 'Region Layers:') {
firefly.action.dispatchAddRegionEntry(null, addRegions, null, null, dispatcher = window.ffViewer.dispatch);
} else {
firefly.action.dispatchAddRegionEntry(selectedLayerId, addRegions, null, null, dispatcher = window.ffViewer.dispatch);
}
};

removeRegionEntry = function() {
Expand Down
161 changes: 83 additions & 78 deletions src/firefly/js/drawingLayers/RegionPlot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
/*
* License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
*/
import DrawLayerCntlr from '../visualize/DrawLayerCntlr.js';
import {take} from 'redux-saga/effects';
import {makeDrawingDef} from '../visualize/draw/DrawingDef.js';
import DrawLayer, {DataTypes, ColorChangeType} from '../visualize/draw/DrawLayer.js';
import {makeFactoryDef} from '../visualize/draw/DrawLayerFactory.js';
import {drawRegions} from '../visualize/region/RegionDrawer.js';
import {addNewRegion, removeRegion} from '../visualize/region/RegionUtil.js';
import {RegionFactory} from '../visualize/region/RegionFactory.js';
import {primePlot} from '../visualize/PlotViewUtil.js';
import {visRoot} from '../visualize/ImagePlotCntlr.js';
import {primePlot, getDrawLayerById} from '../visualize/PlotViewUtil.js';
import ImagePlotCntlr, {visRoot} from '../visualize/ImagePlotCntlr.js';
import {MouseState} from '../visualize/VisMouseSync.js';
import DrawOp from '../visualize/draw/DrawOp.js';
import DrawLayerCntrl, {dispatchModifyCustomField,
import DrawLayerCntlr, {DRAWING_LAYER_KEY,
dispatchModifyCustomField,
dispatchAddRegionEntry,
dispatchDeleteRegionLayer,
dispatchRemoveRegionEntry, dlRoot} from '../visualize/DrawLayerCntlr.js';

import {get, isEmpty} from 'lodash';
import {get, set, isEmpty} from 'lodash';
import {dispatchAddSaga} from '../core/MasterSaga.js';

const ID= 'REGION_PLOT';
const TYPE_ID= 'REGION_PLOT_TYPE';
Expand All @@ -25,16 +27,44 @@ export default {factoryDef, TYPE_ID};

var idCnt=0;

function* regionsRemoveSaga({id, plotId}, dispatch, getState) {
while (true) {
var action = yield take([DrawLayerCntlr.REGION_REMOVE_ENTRY,
DrawLayerCntlr.REGION_DELETE_LAYER,
DrawLayerCntlr.DETACH_LAYER_FROM_PLOT]);

if (action.payload.drawLayerId === id) {
switch (action.type) {
case DrawLayerCntlr.REGION_REMOVE_ENTRY :
var dl = getDrawLayerById(getState()[DRAWING_LAYER_KEY], id);
if (dl && isEmpty(get(dl, 'drawObjAry'))) {
dispatchDeleteRegionLayer(id, plotId);
}
break;
case DrawLayerCntlr.REGION_DELETE_LAYER:
case DrawLayerCntlr.DETACH_LAYER_FROM_PLOT:
return;
break;
}
}
}
}

/**
* create region plot layer
* in region plot layer, attribute regionAry: region description array
* dataFrom: regionAry is from 'json' object or 'ds9' string
* regions: array of region object constructed by parsing regionAry
* regionObjAry: array of drawing object constructed from regions
* => regions and regionObjAry are updated as adding or removing regions occurs
* highlightedRegion: selected region
* @return {Function}
*/
function creator(initPayload) {

var drawingDef= makeDrawingDef('green');
var pairs = {
[MouseState.DOWN.key]: highlightChange
//[MouseState.DOWN.key]: removeRegionDescription
};

idCnt++;
Expand All @@ -43,61 +73,26 @@ function creator(initPayload) {
canHighlight:true,
canUserChangeColor: ColorChangeType.DISABLE,
isPointData:false,
hasPerPlotData: false,
hasPerPlotData: true,
destroyWhenAllDetached: true
};

var actionTypes = [DrawLayerCntrl.REGION_ADD_ENTRY,
var actionTypes = [DrawLayerCntlr.REGION_ADD_ENTRY,
DrawLayerCntlr.REGION_REMOVE_ENTRY];

var dl = DrawLayer.makeDrawLayer( get(initPayload, 'drawLayerId', `${ID}-${idCnt}`),
TYPE_ID, get(initPayload, 'title', 'Region Plot'),
const id = get(initPayload, 'drawLayerId', `${ID}-${idCnt}`);
var dl = DrawLayer.makeDrawLayer( id, TYPE_ID, get(initPayload, 'title', 'Region Plot'),
options, drawingDef, actionTypes, pairs );

dl.regionAry = get(initPayload, 'regionAry', null);
dl.dataFrom = get(initPayload, 'dataFrom', 'ds9');

/*
if (regionAry) {
dl.regions = get(initPayload, 'dataFrom', 'ds9') === 'json' ? RegionFactory.parseRegionJson(regionAry) :
RegionFactory.parseRegionDS9(regionAry);
} else {
dl.regions = null;
}
*/
dl.highlightedRegion = get(initPayload, 'highlightedRegion', null);

dispatchAddSaga(regionsRemoveSaga, {id, plotId: get(initPayload, 'plotId')});
idCnt++;
return dl;
}

// for testing
function removeRegionDescription(mouseStatePayload) {
//const {drawLayerId} = mouseStatePayload.drawLayer;

const id= TYPE_ID + '-0';

var removeRegionAry = [
'image;ellipse 100 100 20p 40p 30p 60p 40p 80p 20 # color=green text={ellipseannulus 2}',
'J2000;ellipse 202.55556, 47.188286 20p 40p 0i # color=#48f text={ellipse 1} width=10',
'image;box 130 100 20p 40p 30p 50p 70p 100p 30 # color=red text={slanted box annulus 3}'];
dispatchRemoveRegionEntry(id, removeRegionAry);
}

// for testing
function addRegionDescription(mouseStatePayload) {
//const {drawLayerId} = mouseStatePayload.drawLayer;

const id= TYPE_ID + '-0';

var regionAry = [
'image;ellipse 100 100 20p 40p 30p 60p 40p 80p 20 # color=green text={ellipseannulus 2}',
'J2000;ellipse 202.55556, 47.188286 20p 40p 0i # color=#48f text={ellipse 1} width=10',
'image;box 130 100 20p 40p 30p 50p 70p 100p 30 # color=red text={slanted box annulus 3}'];

dispatchAddRegionEntry(id, regionAry);
}

/**
* find the drawObj which is selected for highlight
* @param mouseStatePayload
Expand All @@ -115,9 +110,10 @@ function highlightChange(mouseStatePayload) {

function* getDrawObj() {
var index = 0;
var dataPlot = get(data, plotId);

while (index < data.length) {
yield data[index++];
while (index < dataPlot.length) {
yield dataPlot[index++];
}
}
var gen = getDrawObj();
Expand Down Expand Up @@ -167,7 +163,7 @@ function highlightChange(mouseStatePayload) {
* @returns {*}
*/
function getLayerChanges(drawLayer, action) {
const {changes, regionId, regionChanges, drawLayerId } = action.payload;
const {changes, regionChanges, drawLayerId } = action.payload;

if (drawLayerId && drawLayerId !== drawLayer.drawLayerId) return null;
var dd = Object.assign({}, drawLayer.drawData);
Expand All @@ -188,15 +184,27 @@ function getLayerChanges(drawLayer, action) {
}
}
return Object.assign({}, changes, {drawData: dd});
case DrawLayerCntrl.REGION_ADD_ENTRY:
if (regionId === drawLayer.drawLayerId && regionChanges) {
dd[DataTypes.DATA] = addRegionsToData(drawLayer, dd[DataTypes.DATA], regionChanges);

case DrawLayerCntlr.REGION_ADD_ENTRY:
if (regionChanges) {
var {layerTitle} = action.payload;

if (layerTitle) {
drawLayer.title = layerTitle.slice(); // update title of the layer
}
addRegionsToData(drawLayer, regionChanges);
Object.keys(dd[DataTypes.DATA]).forEach((plotId) => {
set(dd[DataTypes.DATA], plotId, drawLayer.drawObjAry)
});
}
return {drawData: dd};

case DrawLayerCntrl.REGION_REMOVE_ENTRY:
if (regionId === drawLayer.drawLayerId && regionChanges) {
dd[DataTypes.DATA] = removeRegionsFromData(drawLayer, dd[DataTypes.DATA], regionChanges);
case DrawLayerCntlr.REGION_REMOVE_ENTRY:
if (regionChanges) {
removeRegionsFromData(drawLayer, regionChanges);
Object.keys(dd[DataTypes.DATA]).forEach((plotId) => {
set(dd[DataTypes.DATA], plotId, drawLayer.drawObjAry)
});
}

return {drawData: dd};
Expand All @@ -207,58 +215,58 @@ function getLayerChanges(drawLayer, action) {
}

function getDrawData(dataType, plotId, drawLayer, action, lastDataRet) {
const {highlightedRegion, regionAry, dataFrom} = drawLayer;
const {highlightedRegion, drawObjAry} = drawLayer;

switch (dataType) {
case DataTypes.DATA:
return isEmpty(lastDataRet) ? plotAllRegions(regionAry, dataFrom, drawLayer) : lastDataRet;
return isEmpty(lastDataRet) ? drawObjAry || plotAllRegions(drawLayer) : lastDataRet;
case DataTypes.HIGHLIGHT_DATA:
return isEmpty(lastDataRet) ? plotHighlightRegion(highlightedRegion) : lastDataRet;
return isEmpty(lastDataRet) ? plotHighlightRegion(highlightedRegion, plotId) : lastDataRet;
}
return null;
}
/**
* create DrawingObj for all regions
* @param regionAry array of region strings
* @param dataFrom from 'json' (server) or 'ds9' (original ds9 description)
* @param dl drawing layer
* @returns {*}
*/
function plotAllRegions(regionAry, dataFrom, dl) {
function plotAllRegions(dl) {
var {dataFrom, regionAry} = dl; //regionAry: array of region strings
//dataFrom: from 'json' (server) or 'ds9' (original ds9 description)
if (!regionAry) {
return [];
}

dl.regions = (dataFrom === 'json') ? RegionFactory.parseRegionJson(regionAry) :
RegionFactory.parseRegionDS9(regionAry);

return drawRegions(dl.regions);
RegionFactory.parseRegionDS9(regionAry);

dl.drawObjAry = drawRegions(dl.regions); //no need regionAry anymore
return dl.drawObjAry;
}

/**
* create DrawingObj for highlighted region
* @param highlightedObj
* @param plotId
* @returns {*}
*/
function plotHighlightRegion(highlightedObj) {
function plotHighlightRegion(highlightedObj, plotId) {
if (!highlightedObj) {
return [];
}

if (highlightedObj.region) highlightedObj.region.highlighted = 1;
return [DrawOp.makeHighlight(highlightedObj, primePlot(visRoot()))];
return [DrawOp.makeHighlight(highlightedObj, primePlot(visRoot(), plotId))];
}

/**
* add new DrawingObj into originally displayed DrawingObj set
* @param drawLayer
* @param lastData
* @param addedRegions
* @returns {Array}
*/
function addRegionsToData(drawLayer, lastData, addedRegions) {
var {regions} = drawLayer;
function addRegionsToData(drawLayer, addedRegions) {
var {regions, drawObjAry: lastData} = drawLayer;
var resultRegions = regions ? regions.slice() : [];
var allDrawobjs = lastData ? lastData.slice() : [];

Expand All @@ -276,25 +284,21 @@ function addRegionsToData(drawLayer, lastData, addedRegions) {
}

drawLayer.regions = resultRegions;
drawLayer.drawObjAry = allDrawobjs;
return allDrawobjs;
}

/**
* remove DrawingObj from originally displayed DrawingObj set
* @param drawLayer
* @param lastData
* @param removedRegions
* @returns {Array}
*/
function removeRegionsFromData(drawLayer, lastData, removedRegions) {
var resultRegions;
function removeRegionsFromData(drawLayer, removedRegions) {
var {regions, drawObjAry: lastData} = drawLayer;
var resultRegions = regions ? regions.slice() : [];
var allDrawObjs = lastData ? lastData.slice() : [];

resultRegions = allDrawObjs.reduce( (prev, drawObj) => {
prev.push(drawObj.region);
return prev;
}, []);

if (resultRegions.length === 0) {
return []; // no region to be removed
}
Expand All @@ -313,5 +317,6 @@ function removeRegionsFromData(drawLayer, lastData, removedRegions) {
}

drawLayer.regions = resultRegions;
drawLayer.drawObjAry = allDrawObjs;
return allDrawObjs;
}
Loading