IRSA-481: finder chart grid result view

src/firefly/js/drawingLayers/Catalog.js

@@ -11,7 +11,7 @@ import FootprintObj from '../visualize/draw/FootprintObj.js';
 import {makeDrawingDef, getNextColor} from '../visualize/draw/DrawingDef.js';
 import DrawLayer, {DataTypes,ColorChangeType} from '../visualize/draw/DrawLayer.js';
 import {makeFactoryDef} from '../visualize/draw/DrawLayerFactory.js';
-import DrawLayerCntlr from '../visualize/DrawLayerCntlr.js';
+import DrawLayerCntlr, {SUBGROUP, GroupingScope} from '../visualize/DrawLayerCntlr.js';
 import {MouseState} from '../visualize/VisMouseSync.js';
 import DrawOp from '../visualize/draw/DrawOp.js';
 import {makeWorldPt} from '../visualize/Point.js';
@@ -24,6 +24,7 @@ import {dispatchTableSelect} from '../tables/TablesCntlr.js';
 import {PlotAttribute} from '../visualize/WebPlot.js';
 import {showInfoPopup} from '../ui/PopupUtil.jsx';
 import {getTblById,getCellValue} from '../tables/TableUtil.js';
+import {getUIComponent} from './CatalogUI.jsx';
 import {FilterInfo} from '../tables/FilterInfo.js';
 import DrawUtil from '../visualize/draw/DrawUtil.js';
 
@@ -35,10 +36,9 @@ const helpText= 'Click on point to highlight';
 
 const findColIdx= (columns,colId) => columns.findIndex( (c) => c.name===colId);
 
-const factoryDef= makeFactoryDef(TYPE_ID,creator,getDrawData,getLayerChanges,null,null);
+const factoryDef= makeFactoryDef(TYPE_ID,creator,getDrawData,getLayerChanges,null,getUIComponent);
 export default {factoryDef, TYPE_ID}; // every draw layer must default export with factoryDef and TYPE_ID
 
-var createCnt= 0;
 
 
 //---------------------------------------------------------------------
@@ -54,18 +54,21 @@ function creator(initPayload, presetDefaults) {
            selectInfo, columns, tableRequest, highlightedRow, color, angleInRadian=false,
            symbol, size,
            dataTooBigForSelection=false, catalog=true,boxData=false }= initPayload;
-    var drawingDef= makeDrawingDef();
-    drawingDef.size= size || 5;
-    drawingDef.symbol= DrawSymbol.get(symbol) || DrawSymbol.SQUARE;
-    drawingDef= Object.assign(drawingDef,presetDefaults);
 
-    var pairs= {
+    const drawingDef= Object.assign(makeDrawingDef(),
+        {
+            size: size || 5,
+            symbol: DrawSymbol.get(symbol) || DrawSymbol.SQUARE
+        },
+        presetDefaults);
+
+    const pairs= {
         [MouseState.DOWN.key]: highlightChange
     };
 
     drawingDef.color= (color || tableMeta[MetaConst.DEFAULT_COLOR] || getNextColor());
 
-    var options= {
+    const options= {
         hasPerPlotData:false,
         isPointData:!boxData,
         canUserDelete: true,
@@ -75,7 +78,8 @@ function creator(initPayload, presetDefaults) {
         canFilter: true,
         dataTooBigForSelection,
         helpLine : helpText,
-        canUserChangeColor: ColorChangeType.DYNAMIC
+        canUserChangeColor: ColorChangeType.DYNAMIC,
+        supportSubgroups: Boolean(tableMeta[SUBGROUP])
     };
     // todo: get the real title
     const dl= DrawLayer.makeDrawLayer(catalogId,TYPE_ID, 
@@ -92,7 +96,6 @@ function creator(initPayload, presetDefaults) {
     dl.boxData= boxData;
     dl.angleInRadian= angleInRadian;
 
-    createCnt++;
     return dl;
 }
 
@@ -116,13 +119,13 @@ function highlightChange(mouseStatePayload) {
  * @returns {function()}
  */
 function makeHighlightDeferred(drawLayer,plotId,screenPt) {
-    var done= false;
-    var idx= 0;
+    let done= false;
+    let idx= 0;
     const maxChunk= 1000;
-    var minDist = 20;
+    let minDist = 20;
     const {data}= drawLayer.drawData;
     const {tableRequest}= drawLayer;
-    var closestIdx= -1;
+    let closestIdx= -1;
     const plot= primePlot(visRoot(),plotId);
     const id= window.setInterval( () => {
         if (done) {
@@ -139,9 +142,9 @@ function makeHighlightDeferred(drawLayer,plotId,screenPt) {
             }
         }
 
-        var dist;
+        let dist;
 
-        for(var i=0;(idx<data.length && i<maxChunk ); i++) {
+        for(let i=0;(idx<data.length && i<maxChunk ); i++) {
             const obj= data[idx];
             if (obj) {
                 dist = DrawOp.getScreenDist(obj, plot, screenPt);
@@ -164,7 +167,7 @@ function getLayerChanges(drawLayer, action) {
     if  (action.type!==DrawLayerCntlr.MODIFY_CUSTOM_FIELD) return null;
 
     const {changes}= action.payload;
-    var dd= Object.assign({},drawLayer.drawData);
+    const dd= Object.assign({},drawLayer.drawData);
     dd[DataTypes.HIGHLIGHT_DATA]= null;
     if (changes.tableData) dd[DataTypes.DATA]= null;
     if (changes.selectInfo) dd[DataTypes.SELECTED_IDXS]= null;
@@ -351,8 +354,8 @@ export function clearFilterCatalog(pv, dlAry) {
 
 export function filterCatalog(pv,dlAry) {
 
-    var p= primePlot(pv);
-    var sel= p.attributes[PlotAttribute.SELECTION];
+    const p= primePlot(pv);
+    const sel= p.attributes[PlotAttribute.SELECTION];
     if (!sel) return;
     const catDlAry= getLayers(pv,dlAry);
     if (!catDlAry.length) return;
@@ -371,8 +374,8 @@ function doFilter(dl,p,sel) {
     if (!tbl) return;
     const filterInfo = get(tbl, 'request.filters');
     const filterInfoCls = FilterInfo.parse(filterInfo);
-    var filter;
-    var newRequest;
+    let filter;
+    let newRequest;
 
     const decimateIdx= findColIdx(dl.tableData.columns,'decimate_key');
     if (decimateIdx>1 && dl.tableMeta['decimate_key']) {
@@ -387,7 +390,7 @@ function doFilter(dl,p,sel) {
     }
     else {
         const rowidIdx= findColIdx(dl.tableData.columns,'ROWID');
-        var idxs= getSelectedPts(sel, p, dl.drawData.data);
+        let idxs= getSelectedPts(sel, p, dl.drawData.data);
         idxs = rowidIdx < 0 ? idxs : idxs.map( (idx) => get(dl,`tableData.data[${idx}][${rowidIdx}]`) );
         filter= `IN (${idxs.toString()})`;
         // filterInfoCls.setFilter(filter);

src/firefly/js/drawingLayers/CatalogUI.jsx

@@ -0,0 +1,75 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {RadioGroupInputFieldView} from '../ui/RadioGroupInputFieldView.jsx';
+import {dispatchModifyCustomField, dispatchChangeVisibility} from '../visualize/DrawLayerCntlr.js';
+import {isDrawLayerVisible} from '../visualize/PlotViewUtil.js';
+import {GroupingScope} from '../visualize/DrawLayerCntlr.js';
+
+
+export const getUIComponent = (drawLayer,pv) => <CatalogUI drawLayer={drawLayer} pv={pv}/>;
+
+function CatalogUI({drawLayer,pv}) {
+
+    const tStyle= {
+        display:'inline-block',
+        whiteSpace: 'nowrap',
+        minWidth: '3em',
+        paddingLeft : 5
+    };
+    const options= [ {label: 'All', value: 'GROUP'},
+                   {label: 'Row', value: 'SUBGROUP'},
+                   {label: 'Image', value: 'SINGLE'}
+    ];
+
+    if (!drawLayer.supportSubgroups) return null;
+
+    const value= drawLayer.groupingScope ? drawLayer.groupingScope.toString() : 'GROUP';
+    return (
+        <div>
+            <div>
+                Overlay:
+                <div style={{display:'inline-block', paddingLeft:7}}>
+                    <RadioGroupInputFieldView options={options}  value={value}
+                                              onChange={(ev) => changeVisibilityScope(drawLayer,pv,ev.target.value)} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+function changeVisibilityScope(drawLayer,pv,value) {
+    const groupingScope= GroupingScope.get(value);
+    const {drawLayerId}= drawLayer;
+    const {plotId, drawingSubGroupId}= pv;
+    if (!drawingSubGroupId) return;
+    dispatchModifyCustomField( drawLayerId, {groupingScope}, plotId );
+    const visible= isDrawLayerVisible(drawLayer,plotId);
+    switch (groupingScope) {
+        case GroupingScope.GROUP : //make sure all image match the visibility of the plotId
+            dispatchChangeVisibility(drawLayerId, visible,plotId);
+            break;
+        case GroupingScope.SUBGROUP : // change all, then put only subgroup back
+            if (visible) dispatchChangeVisibility(drawLayerId, false,plotId);
+            dispatchChangeVisibility(drawLayerId, visible,plotId,true, drawingSubGroupId);
+            break;
+        case GroupingScope.SINGLE : // change all, then put only image back
+            if (visible) dispatchChangeVisibility(drawLayerId, false, plotId);
+            dispatchChangeVisibility(drawLayerId, visible,plotId, false);
+            break;
+    }
+}
+
+CatalogUI.propTypes= {
+    drawLayer     : PropTypes.object.isRequired,
+    pv            : PropTypes.object.isRequired
+};
+

src/firefly/js/tables/ui/TablePanel.jsx

@@ -205,6 +205,7 @@ export class TablePanel extends PureComponent {
                                  onClick={this.toggleOptions}/>
                             }
                             {showOptions &&
+
                             <TablePanelOptions
                                 onChange={this.onOptionUpdate}
                                 onOptionReset={this.onOptionReset}

src/firefly/js/templates/hydra/HydraViewer.jsx

@@ -87,7 +87,7 @@ export class HydraViewer extends PureComponent {
                 </header>
                 <main style={{position: 'relative', padding: 0}}>
                     <div style={{display: 'flex', position: 'relative', flexGrow: 1}}>
-                        <ResultSection layoutInfo={layoutInfo}/>
+                        <ResultSection layoutInfo={layoutInfo} renderExpandView={showExpandedView}/>
                     </div>
                 </main>
             </div>
@@ -149,15 +149,16 @@ function ResultSection({layoutInfo}) {
 
     const {allSearchItems} = getSearchInfo();
     if (!allSearchItems) return <div/>;
-    const {results} = allSearchItems[currentSearch] || {};
+    const {results, renderExpandedView} = allSearchItems[currentSearch] || {};
+    const showExpandedImpl= renderExpandedView || showExpandedView;
     const standard = results ? results(layoutInfo) : <div/>;
 
-    return expanded === LO_VIEW.none ? standard : <ExpandedView {...{expanded, images}}/>;
+    return expanded === LO_VIEW.none ? standard : showExpandedImpl({layoutInfo, expanded, images});
 }
 
-function ExpandedView ({expanded,  images}) {
+function showExpandedView ({expanded,  images}) {
 
-    var view;
+    let view;
     if (expanded === LO_VIEW.tables) {
         view = (<TablesContainer mode='both'
                          closeable={true}

src/firefly/js/templates/lightcurve/LcImageToolbarView.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import BrowserInfo from '../../util/BrowserInfo.js';
 import {getPlotViewById, getAllDrawLayersForPlot} from '../../visualize/PlotViewUtil.js';
-import {WcsMatchType, visRoot, dispatchWcsMatch, dispatchRecenter} from '../../visualize/ImagePlotCntlr.js';
+import {WcsMatchType, visRoot, dispatchWcsMatch} from '../../visualize/ImagePlotCntlr.js';
 import {VisInlineToolbarView} from '../../visualize/ui/VisInlineToolbarView.jsx';
 import {RadioGroupInputFieldView} from '../../ui/RadioGroupInputFieldView.jsx';
 import {dispatchChangeViewerLayout, getViewer, getMultiViewRoot, GRID, SINGLE} from '../../visualize/MultiViewCntlr.js';

src/firefly/js/visualize/Band.js

@@ -1,11 +1,10 @@
 /*
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
-
 import Enum from 'enum';
 
 /**
- * A Band in a plot
+ * A Band in an image plot
  * must be enum 'RED', 'GREEN', 'BLUE', 'NO_BAND'
  * @public
  * @global

src/firefly/js/visualize/DrawLayerCntlr.js

@@ -3,7 +3,9 @@
  */
 
 import {flux} from '../Firefly.js';
-import {getPlotViewIdListInGroup, getDrawLayerById, getConnectedPlotsIds, getAllPlotViewId} from './PlotViewUtil.js';
+import Enum from 'enum';
+import {getPlotViewIdListInGroup, getPlotViewById, getDrawLayerById,
+          getConnectedPlotsIds, getAllPlotViewId} from './PlotViewUtil.js';
 import ImagePlotCntlr, {visRoot}  from './ImagePlotCntlr.js';
 import DrawLayerReducer from './reducer/DrawLayerReducer.js';
 import {without,union,isEmpty} from 'lodash';
@@ -29,6 +31,14 @@ import {REINIT_APP} from '../core/AppDataCntlr.js';
 
 export const DRAWLAYER_PREFIX = 'DrawLayerCntlr';
 
+export const SUBGROUP= 'subgroup';
+
+/** {Enum} can be 'GROUP', 'SUBGROUP', 'SINGLE' */
+export const GroupingScope= new Enum(['GROUP', 'SUBGROUP', 'SINGLE']);
+
+
+
+
 const CREATE_DRAWING_LAYER= `${DRAWLAYER_PREFIX}.createDrawLayer`;
 const DESTROY_DRAWING_LAYER= `${DRAWLAYER_PREFIX}.destroyDrawLayer`;
 const CHANGE_VISIBILITY= `${DRAWLAYER_PREFIX}.changeVisibility`;
@@ -79,6 +89,7 @@ export const RegionSelectStyle = ['UprightBox', 'DottedOverlay', 'SolidOverlay',
 export const  defaultRegionSelectColor = '#DAA520';   // golden
 export const  defaultRegionSelectStyle = RegionSelectStyle[0];
 
+
 export function getRegionSelectStyle(style = defaultRegionSelectStyle) {
     var idx = RegionSelectStyle.findIndex((val) => {
         return val.toLowerCase() === style.toLowerCase();
@@ -181,7 +192,7 @@ export function dispatchTableToIgnore(drawLayerTypeId, tableId) {
  * @function  dispatchCreateDrawLayer
  */
 export function dispatchCreateDrawLayer(drawLayerTypeId, params={}) {
-    var drawLayer= flux.createDrawLayer(drawLayerTypeId,params);
+    const drawLayer= flux.createDrawLayer(drawLayerTypeId,params);
     flux.process({type: CREATE_DRAWING_LAYER, payload: {drawLayer}} );
 
     const plotIdAry= dlRoot().preAttachedTypes[drawLayerTypeId];
@@ -196,18 +207,27 @@ export function dispatchCreateDrawLayer(drawLayerTypeId, params={}) {
  * @param {string|string[]} id make the drawLayerId or drawLayerTypeId, this may be an array
  * @param visible
  * @param plotId
- * @param useGroup
+ * @param useGroup If true, get all the plotViews in the group of the plotId, if false use only the one
+ * @param subGroupId if defined the list of PlotViews affected will be further filtered by the subGroupId
  *  @public
  *  @memberof firefly.action
  *  @function dispatchChangeVisibility
  */
-export function dispatchChangeVisibility(id,visible, plotId, useGroup= true) {
-    var plotIdAry= getPlotViewIdListInGroup(visRoot(), plotId);
-
-    getDrawLayerIdAry(dlRoot(),id,useGroup)
-        .forEach( (drawLayerId) => {
-            flux.process({type: CHANGE_VISIBILITY, payload: {drawLayerId, visible, plotIdAry} });
+export function dispatchChangeVisibility(id,visible, plotId, useGroup= true, subGroupId= undefined) {
+    let plotIdAry= useGroup ? getPlotViewIdListInGroup(visRoot(), plotId) : [plotId];
+    if (subGroupId) {
+        const vr= visRoot();
+        plotIdAry= plotIdAry.filter( (plotId) => {
+            const pv= getPlotViewById(vr,plotId);
+            return  (pv && subGroupId===pv.drawingSubGroupId);
         });
+    }
+    if (plotIdAry.length) {
+        getDrawLayerIdAry(dlRoot(),id,useGroup)
+            .forEach( (drawLayerId) => {
+                flux.process({type: CHANGE_VISIBILITY, payload: {drawLayerId, visible, plotIdAry} });
+            });
+    }
 }
 
 /**