IRSA-7518, FIREFLY-1948, FIREFLY-1770: SPHEREx mosaic tool, Result Panel's tab layout control, Job Progress UI updates

src/firefly/java/edu/caltech/ipac/firefly/data/ServerRequest.java

@@ -3,6 +3,7 @@
  */
 package edu.caltech.ipac.firefly.data;
 
+import edu.caltech.ipac.firefly.util.MathUtil;
 import edu.caltech.ipac.util.StringUtils;
 import edu.caltech.ipac.visualize.plot.ResolvedWorldPt;
 import edu.caltech.ipac.visualize.plot.WorldPt;
@@ -276,6 +277,10 @@ public double getDoubleParam(String key) {
         return StringUtils.getDouble(getParam(key));
     }
 
+    public double getDoubleParam(String key, double def) {
+        return StringUtils.getDouble(getParam(key), def);
+    }
+
     public float getFloatParam(String key) {
         return StringUtils.getFloat(getParam(key));
     }
@@ -294,6 +299,15 @@ public WorldPt getWorldPtParam(String key) {
         return wpt;
     }
 
+    public double getSizeParam(String key, MathUtil.Units units) {
+        double sizeInDeg = getDoubleParam(key); // client sends size in degrees
+        return MathUtil.convert(MathUtil.Units.DEGREE, units, sizeInDeg);
+    }
+
+    public double getSizeParam(String key) {
+        return getSizeParam(key, MathUtil.Units.DEGREE);
+    }
+
 //====================================================================
 //
 //====================================================================

src/firefly/js/charts/ChartsCntlr.js

@@ -86,6 +86,7 @@ function reducers() {
  *  @param {string} [p.viewerId] – viewer where chart will be displayed
  *  @param {boolean} [p.deletable] - is the chart deletable, if undefined: single chart in a group is not deletable, multiple are deletable
  *  @param {string} [p.help_id] - help id, if undefined, no help icon shows up
+ *  @param {boolean} [p.activateViewer] - activate the chart viewer (tab) when chart is added
  *  @param {Function} [p.dispatcher=flux.process] - only for special dispatching uses such as remote
  *  @public
  *  @function dispatchChartAdd

src/firefly/js/core/LayoutCntlr.js

@@ -18,7 +18,8 @@ import { TBL_RESULTS_ADDED, TBL_RESULTS_REMOVE, TABLE_REMOVE, TABLE_SPACE_PATH,
 } from '../tables/TablesCntlr.js';
 import {CHART_ADD, CHART_REMOVE, CHART_SPACE_PATH} from '../charts/ChartsCntlr.js';
 import {
-    DEFAULT_FITS_VIEWER_ID, getMultiViewRoot, getViewer, PINNED_CHART_VIEWER_ID, REPLACE_VIEWER_ITEMS
+    DEFAULT_FITS_VIEWER_ID,
+    DEFAULT_PLOT2D_VIEWER_ID, getMultiViewRoot, getViewer, PINNED_CHART_VIEWER_ID, REPLACE_VIEWER_ITEMS
 } from '../visualize/MultiViewCntlr.js';
 import {COMMAND, getMenu, REINIT_APP} from './AppDataCntlr.js';
 import {getDefaultChartProps} from '../charts/ChartUtil.js';
@@ -66,15 +67,24 @@ export const REMOVE_CELL        = `${LAYOUT_PATH}.removeCell`;
 export const ENABLE_SPECIAL_VIEWER= `${LAYOUT_PATH}.enableSpecialViewer`;
 
 
+/*------------------ Layout Constants ---------------------------- */
+
 export const TRIVIEW_ICov_Ch_T= 'TRIVIEW_ICov_Ch_T'; //top left: image/cov, top right: charts, bottom: tables
 export const TRIVIEW_I_ChCov_T= 'TRIVIEW_I_ChCov_T';//top left: image, top right: charts/cov, bottom: tables
 export const BIVIEW_ICov_Ch= 'BIVIEW_ICov_Ch'; //left: image/cov, right: charts
 export const BIVIEW_I_ChCov= 'BIVIEW_I_ChCov'; //left: image, right: charts/cov
 export const BIVIEW_T_IChCov= 'BIVIEW_T_IChCov'; //left: tables, right: image/charts/cov
 export const BIVIEW_IChCov_T= 'BIVIEW_IChCov_T'; //left: image/charts/cov, right: tables
 
-
-
+/* IDs of all the tabs other than TablesContainer inside the "Results" panel */
+export const TAB_IDS = {
+    ACTIVE_CHART: 'activeCharts',
+    PINNED_CHART: 'pinnedCharts',
+    COVERAGE: 'coverage',
+    DP: 'meta',
+    PINNED_IMAGE: 'fits',
+    PROPERTY_SHEET: 'rowDetails',
+};
 
 /*---------------------------- Reducers ----------------------------*/
 
@@ -435,7 +445,9 @@ export function dropDownHandler(layoutInfo, action) {
     // calculate dropDown when new UI elements are added or removed from results
     switch (action.type) {
         case CHART_ADD:
-            return smartMerge(layoutInfo, {dropDown: resultsViewDropdown});
+            const {viewerId, activateViewer} = action.payload;
+            const updates = activateViewer ? getChartViewerLayout(viewerId) : {};
+            return smartMerge(layoutInfo, {...updates, dropDown: resultsViewDropdown});
         case TBL_RESULTS_ADDED:
         case TBL_RESULTS_ACTIVE:
         case TABLE_LOADED:
@@ -571,3 +583,15 @@ function getColFitIdx(gridView, row, testIdx, gridColumns, testWidth) {
 export const MENU_TAB_NODES = 'menuTabNodes';
 export const getMenuTabNodes = () => getLayouInfo()?.[MENU_TAB_NODES] ?? {};
 export const dispatchUpdateMenuTabNodes = (menuTabNodes) => dispatchUpdateLayoutInfo({[MENU_TAB_NODES]: menuTabNodes});
+
+// get LayoutInfo based on the viewerId of the chart add action
+const getChartViewerLayout = (viewerId) => {
+    switch (viewerId) {
+        case DEFAULT_PLOT2D_VIEWER_ID:
+            return {rightSide: {selectedTab: TAB_IDS.ACTIVE_CHART}};
+        case PINNED_CHART_VIEWER_ID:
+            return {rightSide: {selectedTab: TAB_IDS.PINNED_CHART}};
+        default:
+            return {};
+    }
+};

src/firefly/js/core/background/BackgroundUtil.js

@@ -318,15 +318,20 @@ function  getMimeLoader(mimeType, href) {
     }
 }
 
+const handleLayoutChanges = (jobInfo) => {
+    showJobMonitor(false);
+    const {submitTo} = getMetadata({jobInfo});
+    if (submitTo)  dispatchFormSubmit({submitTo}); // if this is a routed app, submit the form to update the route
+};
+
 export function loadTableResult({jobInfo, request, href}) {
-    const {submitTo, tbl_id} = getMetadata({jobInfo});
+    const {tbl_id} = getMetadata({jobInfo});
     const tblRequest= makeFileRequest(null, href, null, {tbl_id});
     copyRequestOptions(request, tblRequest);
 
     const {tbl_ui_id} = getTableUiByTblId(tbl_id) || {};        // re-use existing table UI if exists
     dispatchTableSearch(tblRequest, {tbl_ui_id});
-    showJobMonitor(false);
-    if (submitTo)  dispatchFormSubmit({submitTo}); // if this is a routed app, submit the form to update the route
+    handleLayoutChanges(jobInfo);
 }
 
 export function getMetadata({jobInfo, resultIdx=0}) {
@@ -350,5 +355,6 @@ export function loadImageResult({jobInfo, href}) {
     wpRequest.setPlotGroupId(viewerId);
     const plotId = `${href.replace('.', '_')}-${jobInfo.jobId}`;
     dispatchPlotImage({plotId, wpRequest, viewerId});
+    handleLayoutChanges(jobInfo);
 }
 

src/firefly/js/core/background/JobInfo.jsx

@@ -121,18 +121,22 @@ export function JobProgress({jobInfo, ...props}) {
     if (!isActive(jobInfo)) return null;
 
     const pct = getJobPctComplete(jobInfo);
-    const lpProps =  pct >= 0 ? {determinate:true, value:pct} : {size:'md'};
+    const lpProps =  pct >= 0 ? {determinate:true, value:pct} : {};
     return (
-        <Slot component={Sheet} variant='soft' sx={{flexGrow:1, padding:1}} slotProps={{...props}}>
-            <Stack direction='row' spacing={1} alignItems='center'>
-                <Typography level='title-sm' >Progress:</Typography>
-                <LinearProgress variant='outlined' {...lpProps}/>
+        <Stack spacing={.25} {...props} sx={{flex: 1, ...props?.sx}}>
+            <Stack direction='row' spacing={1} alignItems='baseline'>
+                <Typography level='title-sm'>Progress:</Typography>
+                <Typography level='body-sm' title={msg}
+                            sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                    {msg}
+                </Typography>
+                <Typography level='body-sm' color='primary'
+                            sx={{fontVariantNumeric: 'tabular-nums', flexGrow: 1, textAlign: 'right'}}>
+                    {elapsed}
+                </Typography>
             </Stack>
-            <Stack direction='row' spacing={1}>
-                <Typography level='body-xs' color='warning' sx={{fontVariantNumeric: 'tabular-nums'}}> {elapsed} — </Typography>
-                <Typography level='body-xs' fontStyle='italic' title={msg} sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',}}> {msg} </Typography>
-            </Stack>
-        </Slot>
+            <LinearProgress variant='solid' thickness={2} {...lpProps}/>
+        </Stack>
     );
 }
 
@@ -155,7 +159,7 @@ function JobInfoDetails({jobInfo={}}) {
                 <JobIdWrapper jobInfo={jobInfo}/>
             </GridRow>
             <GridRow>
-                <JobProgress jobInfo={jobInfo}/>
+                <JobProgress jobInfo={jobInfo} sx={{mb: 1, mr: 1}}/>
             </GridRow>
             <GridRow>
                 <KeywordBlock label='Creation Time' title='Referred to as "creationTime" in UWS' value={toDateString(creationTime, useLocalTime)}  {...dateProps}/>

src/firefly/js/templates/fireflyviewer/TriViewPanel.jsx

@@ -12,11 +12,11 @@ import React, {memo, useContext} from 'react';
 import {getExpandedChartProps} from '../../charts/ChartsCntlr.js';
 import {allowPinnedCharts} from '../../charts/ChartUtil.js';
 import {ActiveChartsPanel} from '../../charts/ui/ChartsContainer.jsx';
-import {dispatchUpdateLayoutInfo, getLayouInfo, getResultCounts, LO_VIEW} from '../../core/LayoutCntlr.js';
+import {dispatchUpdateLayoutInfo, getLayouInfo, getResultCounts, LO_VIEW, TAB_IDS} from '../../core/LayoutCntlr.js';
 import {TablesContainer} from '../../tables/ui/TablesContainer.jsx';
 import {AppInitLoadingMessage} from '../../ui/AppInitLoadingMessage.jsx';
 import {AppPropertiesCtx} from '../../ui/AppPropertiesCtx.jsx';
-import {Tab, Tabs} from '../../ui/panel/TabPanel.jsx';
+import {Tab, TabPanel} from '../../ui/panel/TabPanel.jsx';
 import {useStoreConnector} from '../../ui/SimpleComponent.jsx';
 import {DEFAULT_PLOT2D_VIEWER_ID, PINNED_CHART_VIEWER_ID} from '../../visualize/MultiViewCntlr.js';
 import {
@@ -94,21 +94,14 @@ TriViewPanel.propTypes = {
 
 let lastSelected;
 
-const ACTIVE_CHART_TAB_ID= 'activeCharts';
-const PINNED_CHART_TAB_ID= 'pinnedCharts';
-const COVERAGE_TAB_ID= 'coverage';
-const DP_TAB_ID='meta';
-const PINNED_IMAGE_TAB_ID='fits';
-const PROPERTY_SHEET_TAB_ID='rowDetails';
-
 function getSelectedTab(idObj,coverageRight,showXyPlots,showFits,anyTables,anyPinnedCharts) {
     const tabIds= Object.entries(idObj).filter(([,v]) => v).map(([k]) => k);
     if (tabIds.includes(lastSelected)) return lastSelected;
     if (!anyTables) {
-        if (showFits) return PINNED_IMAGE_TAB_ID;
-        if (anyPinnedCharts) return PINNED_CHART_TAB_ID;
+        if (showFits) return TAB_IDS.PINNED_IMAGE;
+        if (anyPinnedCharts) return TAB_IDS.PINNED_CHART;
     }
-    return coverageRight ? COVERAGE_TAB_ID : showXyPlots ? ACTIVE_CHART_TAB_ID : PINNED_CHART_TAB_ID;
+    return coverageRight ? TAB_IDS.COVERAGE : showXyPlots ? TAB_IDS.ACTIVE_CHART : TAB_IDS.PINNED_CHART;
 }
 
 function makeKey(idObj) {
@@ -121,7 +114,7 @@ function makeKey(idObj) {
 
 
 function RightSide({expanded, closeable, showXyPlots, showMeta, showFits, dataProductTableId, coverageRight, imagesWithCharts }) {
-
+    const selectedTab = useStoreConnector(()=>getLayouInfo()?.rightSide?.selectedTab);
     const onTabSelect = (id) => {
         lastSelected= id;
         dispatchUpdateLayoutInfo({rightSide:{selectedTab:id}});
@@ -144,32 +137,32 @@ function RightSide({expanded, closeable, showXyPlots, showMeta, showFits, dataPr
     const anyTables= Boolean(tableCnt);
     const anyPinnedCharts= Boolean(pinChartCnt);
     const idObj= {
-        [ACTIVE_CHART_TAB_ID]: anyTables && showXyPlots,
-        [PINNED_CHART_TAB_ID]: allowPinnedCharts() && showPinnedTab,
-        [COVERAGE_TAB_ID]: anyTables && (imagesWithCharts || coverageRight),
-        [DP_TAB_ID]: imagesWithCharts && showMeta,
-        [PINNED_IMAGE_TAB_ID]: imagesWithCharts && showFits,
-        [PROPERTY_SHEET_TAB_ID]:anyTables,
+        [TAB_IDS.ACTIVE_CHART]: anyTables && showXyPlots,
+        [TAB_IDS.PINNED_CHART]: allowPinnedCharts() && showPinnedTab,
+        [TAB_IDS.COVERAGE]: anyTables && (imagesWithCharts || coverageRight),
+        [TAB_IDS.DP]: imagesWithCharts && showMeta,
+        [TAB_IDS.PINNED_IMAGE]: imagesWithCharts && showFits,
+        [TAB_IDS.PROPERTY_SHEET]:anyTables,
     };
 
     const style= {height: '100%'};
     const defaultSelected= getSelectedTab(idObj,coverageRight,showXyPlots,showFits,anyTables,anyPinnedCharts);
 
 
-    if (idObj[PINNED_IMAGE_TAB_ID] && Object.values(idObj).filter( (v) => v).length===1) {
-        return makeFitsPinnedTab({id:PINNED_IMAGE_TAB_ID,asTab:false});
+    if (idObj[TAB_IDS.PINNED_IMAGE] && Object.values(idObj).filter( (v) => v).length===1) {
+        return makeFitsPinnedTab({id:TAB_IDS.PINNED_IMAGE,asTab:false});
     }
 
 
     return(
-        <Tabs {...{key:makeKey(idObj), style, onTabSelect, defaultSelected} } >
-            {idObj[ACTIVE_CHART_TAB_ID] && makeActiveChartTab({activeLabel, chartExpandedMode, closeable, asTab:true, id:ACTIVE_CHART_TAB_ID}) }
-            {idObj[PINNED_CHART_TAB_ID] && makePinnedChartTab({pinnedLabel, chartExpandedMode, closeable, asTab:true, id:PINNED_CHART_TAB_ID}) }
-            {idObj[COVERAGE_TAB_ID] && makeCoverageTab({id:COVERAGE_TAB_ID})}
-            {idObj[DP_TAB_ID] && makeMultiProductViewerTab({dataProductTableId,id:DP_TAB_ID})}
-            {idObj[PINNED_IMAGE_TAB_ID] && makeFitsPinnedTab({id:PINNED_IMAGE_TAB_ID,asTab:true})}
-            {idObj[PROPERTY_SHEET_TAB_ID] && makePropertySheetTab({id:PROPERTY_SHEET_TAB_ID})}
-        </Tabs>
+        <TabPanel {...{key:makeKey(idObj), value: selectedTab ?? defaultSelected, style, onTabSelect} } >
+            {idObj[TAB_IDS.ACTIVE_CHART] && makeActiveChartTab({activeLabel, chartExpandedMode, closeable, asTab:true, id:TAB_IDS.ACTIVE_CHART}) }
+            {idObj[TAB_IDS.PINNED_CHART] && makePinnedChartTab({pinnedLabel, chartExpandedMode, closeable, asTab:true, id:TAB_IDS.PINNED_CHART}) }
+            {idObj[TAB_IDS.COVERAGE] && makeCoverageTab({id:TAB_IDS.COVERAGE})}
+            {idObj[TAB_IDS.DP] && makeMultiProductViewerTab({dataProductTableId,id:TAB_IDS.DP})}
+            {idObj[TAB_IDS.PINNED_IMAGE] && makeFitsPinnedTab({id:TAB_IDS.PINNED_IMAGE,asTab:true})}
+            {idObj[TAB_IDS.PROPERTY_SHEET] && makePropertySheetTab({id:TAB_IDS.PROPERTY_SHEET})}
+        </TabPanel>
     );
 }
 

src/firefly/js/ui/TargetPanel.jsx

@@ -29,7 +29,7 @@ const simbadThenNed= 'simbadthenned';
 const TargetPanelView = (props) =>{
     const {showHelp, feedback, valid, message, onChange, value, button, slotProps, fieldKey,
         children, resolver, showResolveSourceOp= true, showExample= true,
-        label= LABEL_DEFAULT,
+        label= LABEL_DEFAULT, inputFieldLabel,
         targetPanelExampleRow1, targetPanelExampleRow2,
         connectedMarker=false, placeholderHighlight=true,
         examples, onUnmountCB, sx}= props;
@@ -41,6 +41,7 @@ const TargetPanelView = (props) =>{
 
     const positionField = (
         <InputFieldView {...{valid, visible:true, message,
+            label: inputFieldLabel,
             placeholder:label,
             onChange: (ev) => onChange(ev.target.value, TARGET),
             endDecorator,
@@ -74,6 +75,7 @@ const TargetPanelView = (props) =>{
 
 TargetPanelView.propTypes = {
     label : string,
+    inputFieldLabel: string,
     sx: object,
     valid   : bool.isRequired,
     showHelp   : bool.isRequired,

src/firefly/js/ui/dynamic/EmbeddedPositionSearchPanel.jsx

@@ -452,14 +452,15 @@ function ConeOp({slotProps,nullAllowed}) {
     }= slotProps.sizeInput ?? {};
     const {
         targetKey=DEF_TARGET_PANEL_KEY,
+        inputFieldLabel,
         targetPanelExampleRow1,
-        targetPanelExampleRow2
+        targetPanelExampleRow2,
     }= slotProps.targetPanel ?? {};
     return (
         <Stack>
             <TargetPanel {...{
                 sx:{width:DEFAULT_TARGET_PANEL_WIDTH, ...slotProps.targetPanel?.sx},
-                key:targetKey,
+                key:targetKey, inputFieldLabel,
                 fieldKey:targetKey, nullAllowed,
                 targetPanelExampleRow1, targetPanelExampleRow2,
                 slotProps: {