From 752f899f3b24ff0eea7c10ba4ec670fa245d3587 Mon Sep 17 00:00:00 2001
From: roby <roby@ipac.caltech.edu>
Date: Thu, 5 Mar 2026 15:53:38 -0700
Subject: [PATCH] Firefly-1924: Add Legend support

---
 src/firefly/js/drawingLayers/Catalog.js       |   3 +-
 src/firefly/js/drawingLayers/HiPSMOC.js       |   7 +-
 .../js/drawingLayers/hpx/HpxCatalog.js        |   3 +-
 src/firefly/js/ui/QuantityInputField.jsx      |   6 +
 src/firefly/js/ui/ToolbarButton.jsx           | 151 +++++++++---------
 src/firefly/js/visualize/HiPSMocUtil.js       |   7 +-
 src/firefly/js/visualize/draw/DrawLayer.js    |   2 +
 src/firefly/js/visualize/iv/ImageViewer.jsx   |   5 +-
 .../js/visualize/iv/ImageViewerDecorate.jsx   |  14 +-
 .../js/visualize/saga/CoverageWatcher.js      |  12 +-
 src/firefly/js/visualize/task/PlotHipsTask.js |   4 +-
 src/firefly/js/visualize/ui/CoveraeViewer.jsx |   2 +
 .../js/visualize/ui/DrawLayerItemView.jsx     |  46 +++++-
 .../js/visualize/ui/DrawLayerUIComponents.jsx |  22 ++-
 .../js/visualize/ui/MultiImageViewer.jsx      |  58 +++----
 .../js/visualize/ui/MultiImageViewerView.jsx  | 122 ++++++--------
 .../js/visualize/ui/MultiItemViewerView.jsx   |  78 ++++-----
 ...lbarView.jsx => RightSidePvDecoration.jsx} |  36 +++--
 src/firefly/js/visualize/ui/SmallLegend.jsx   | 113 +++++++++++++
 .../js/visualize/ui/TargetHiPSPanel.jsx       |  15 +-
 .../visualize/ui/TargetHipsPanelToolbar.jsx   |  20 +--
 21 files changed, 442 insertions(+), 284 deletions(-)
 rename src/firefly/js/visualize/ui/{VisInlineToolbarView.jsx => RightSidePvDecoration.jsx} (69%)
 create mode 100644 src/firefly/js/visualize/ui/SmallLegend.jsx

diff --git a/src/firefly/js/drawingLayers/Catalog.js b/src/firefly/js/drawingLayers/Catalog.js
index 5f3467693a..897f9767b0 100644
--- a/src/firefly/js/drawingLayers/Catalog.js
+++ b/src/firefly/js/drawingLayers/Catalog.js
@@ -78,7 +78,7 @@ const pointBehavior= (catalogType) =>
 
 
 function creator(initPayload, presetDefaults={}) {
-    const {catalogId, tableData, tableMeta, title, catalogType= CatalogType.POINT,
+    const {catalogId, tableData, tableMeta, title, shortTitle, catalogType= CatalogType.POINT,
            selectInfo, columns, tableRequest, highlightedRow, color, angleInRadian=false,
            tableCanControlColor:inTableCanControlColor,
            symbol, size, tbl_id, dataTooBigForSelection=false, tableSelection, layersPanelLayoutId,
@@ -104,6 +104,7 @@ function creator(initPayload, presetDefaults={}) {
     const helpText= `Click on ${(catalogType===CatalogType.REGION) ? 'region' : 'point'} to highlight`;
     const options= {
         catalogType,
+        shortTitle,
         layersPanelLayoutId,
         hasPerPlotData:false,
         isPointData: pointBehavior(catalogType),
diff --git a/src/firefly/js/drawingLayers/HiPSMOC.js b/src/firefly/js/drawingLayers/HiPSMOC.js
index f4cd13e6aa..2758e10ed9 100644
--- a/src/firefly/js/drawingLayers/HiPSMOC.js
+++ b/src/firefly/js/drawingLayers/HiPSMOC.js
@@ -178,6 +178,7 @@ function creator(initPayload) {
 
     dl.requestedStyle= drawingDef.style;
 
+    dl.shortTitle= initPayload.shortTitle;
     dl.mocFitsInfo = mocFitsInfo;
     dl.mocTable= undefined;
     dl.rootTitle= dl.title;
@@ -282,7 +283,7 @@ function getLayerChanges(drawLayer, action) {
             return {title: tObj, updateStatusAry};
 
         case DrawLayerCntlr.MODIFY_CUSTOM_FIELD:
-            const {fillStyle, targetPlotId, mocTable, autoUsesOnlyOutline=false} = action.payload.changes;
+            const {fillStyle, targetPlotId, mocTable} = action.payload.changes;
 
             if (fillStyle && targetPlotId) {
 
@@ -295,7 +296,7 @@ function getLayerChanges(drawLayer, action) {
                 let newStyle;
                 const newMocObj = {...drawLayer.mocObj};
                 if (requestedStyle===Style.AUTO) {
-                    const {style: s, color:newColor} = getAutoDrawStyle(primePlot(visRoot(),targetPlotId), drawingDef.color, autoUsesOnlyOutline);
+                    const {style: s, color:newColor} = getAutoDrawStyle(primePlot(visRoot(),targetPlotId), drawingDef.color, action.payload.changes.autoUsesOnlyOutline);
                     newDrawingDef.color= newColor;
                     newMocObj.color= newColor;
                     newStyle= s;
@@ -317,7 +318,7 @@ function getLayerChanges(drawLayer, action) {
                 const mocCsys= getMetaEntry(mocTable,'COORDSYS')?.trim().toUpperCase().startsWith('G') ?
                     CoordinateSys.GALACTIC : CoordinateSys.EQ_J2000;
                 const mocObj = createMocObj(drawLayer, mocTiles, mocCsys);
-                return {mocTable, mocObj, mocCsys, title: getTitle(drawLayer, visiblePlotIdAry), autoUsesOnlyOutline};
+                return {mocTable, mocObj, mocCsys, title: getTitle(drawLayer, visiblePlotIdAry), autoUsesOnlyOutline:action.payload.changes.autoUsesOnlyOutline};
             }
             break;
 
diff --git a/src/firefly/js/drawingLayers/hpx/HpxCatalog.js b/src/firefly/js/drawingLayers/hpx/HpxCatalog.js
index a31b51e1e6..2a755af2c0 100644
--- a/src/firefly/js/drawingLayers/hpx/HpxCatalog.js
+++ b/src/firefly/js/drawingLayers/hpx/HpxCatalog.js
@@ -55,7 +55,7 @@ export default {factoryDef, TYPE_ID}; // every draw layer must default export wi
 function creator(initPayload, presetDefaults={}) {
 
     const {catalogId,
-        highlightedRow, color, title,
+        highlightedRow, color, title, shortTitle,
         tableCanControlColor= true,
         symbol, size, tbl_id,
         layersPanelLayoutId,
@@ -83,6 +83,7 @@ function creator(initPayload, presetDefaults={}) {
         hasPerPlotData: true,
         isPointData:true,
         supportSubgroups: Boolean(table.tableMeta && table.tableMeta[SUBGROUP]),
+        shortTitle,
         layersPanelLayoutId,
     };
 
diff --git a/src/firefly/js/ui/QuantityInputField.jsx b/src/firefly/js/ui/QuantityInputField.jsx
index 2981f2958b..26967ec8e5 100644
--- a/src/firefly/js/ui/QuantityInputField.jsx
+++ b/src/firefly/js/ui/QuantityInputField.jsx
@@ -113,6 +113,7 @@ export function QuantityInputFieldView({min, max, sx, slotProps, inputStyle = {}
         ? `Valid range: ${formatQuantity(min, unit)} - ${formatQuantity(max, unit)}`
         : '';
 
+
     return (
         <Stack sx={{width: 'min-content', ...sx}}>
             <InputFieldView
@@ -206,6 +207,11 @@ export const QuantityInputField = memo((props) => {
         initialState: normalizeInitState(props?.initialState, quantityBaseUnit, convertQuantityUnits),
     });
 
+    if (viewProps.value && !viewProps.displayValue) {
+        // eslint-disable-next-line react-hooks/immutability
+        viewProps.displayValue = convertQuantityUnits(viewProps.value, viewProps.quantityBaseUnit, viewProps.unit);
+    }
+
     const handleOnChange = (ev, quantityInfoUpdate) => {
         const { value, displayValue, unit=quantityBaseUnit, validator,
             nullAllowed=false, min, max } = { ...viewProps, ...quantityInfoUpdate };
diff --git a/src/firefly/js/ui/ToolbarButton.jsx b/src/firefly/js/ui/ToolbarButton.jsx
index 0ea8b22546..3476b09411 100644
--- a/src/firefly/js/ui/ToolbarButton.jsx
+++ b/src/firefly/js/ui/ToolbarButton.jsx
@@ -56,91 +56,91 @@ function makeImage(icon,style={},className='') {
  * @param props.lastTextItem
  * @param props.ref
  * @param props.style - a style to apply
- * @return {object}
- */
+* @return {object}
+*/
 export function ToolbarButton(props) {
-    const {
-        icon,text='',badgeCount=0,badgeAlert=false, enabled=true, visible=true,
-        imageStyle={}, iconButtonSize, shortcutKey='', color='neutral', variant='plain',
-        disableHiding, active, sx, CheckboxOnIcon, CheckboxOffIcon, value,
-        useDropDownIndicator= false, hasCheckBox=false, checkBoxOn=false, pressed=false,
-        component, slotProps={}, dropPosition={}, dropDownCB, onClick, ref:fRef} = props;
-    checkProps(props, ToolbarButton);
+const {
+    icon,text='',badgeCount=0,badgeAlert=false, enabled=true, visible=true,
+    imageStyle={}, iconButtonSize, shortcutKey='', color='neutral', variant='plain', buttonSize='md',
+    disableHiding, active, sx, CheckboxOnIcon, CheckboxOffIcon, value,
+    useDropDownIndicator= false, hasCheckBox=false, checkBoxOn=false, pressed=false,
+    component, slotProps={}, dropPosition={}, dropDownCB, onClick, ref:fRef} = props;
+checkProps(props, ToolbarButton);
 
-    const tip= props.tip || props.title || '';
-    const buttonPressed= pressed || active;
-    const {current:divElementRef}= useRef({divElement:undefined});
-    useImperativeHandle(fRef, () => divElementRef.divElement);
-    const setupRef  = useCallback((c) => divElementRef.divElement= c, [divElementRef]);
+const tip= props.tip || props.title || '';
+const buttonPressed= pressed || active;
+const {current:divElementRef}= useRef({divElement:undefined});
+useImperativeHandle(fRef, () => divElementRef.divElement);
+const setupRef  = useCallback((c) => divElementRef.divElement= c, [divElementRef]);
 
-    const handleClick= useCallback((ev) => {
-        onClick?.(divElementRef.divElement,ev);
-        dropDownCB ? dropDownCB(divElementRef.divElement) : dispatchHideDialog(DROP_DOWN_KEY);
-    },[onClick,dropDownCB,divElementRef.divElement]);
+const handleClick= useCallback((ev) => {
+    onClick?.(divElementRef.divElement,ev);
+    dropDownCB ? dropDownCB(divElementRef.divElement) : dispatchHideDialog(DROP_DOWN_KEY);
+},[onClick,dropDownCB,divElementRef.divElement]);
 
-    useEffect( () => {
-        const {cnrl,meta,key,hasShortcut}= getShortCutInfo(shortcutKey);
-        if (!hasShortcut) return;
-        const listener= (ev) => {
-            if (cnrl && !ev.ctrlKey) return;
-            if (meta && !ev.metaKey) return;
-            ev.key===key && handleClick();
-        };
-        window.document.addEventListener('keydown', listener);
-        return () => window.document.removeEventListener('keydown', listener);
-    });
-    if (!visible) return false;
-    const allowInput= disableHiding?'allow-input':'normal-button-hide';
+useEffect( () => {
+    const {cnrl,meta,key,hasShortcut}= getShortCutInfo(shortcutKey);
+    if (!hasShortcut) return;
+    const listener= (ev) => {
+        if (cnrl && !ev.ctrlKey) return;
+        if (meta && !ev.metaKey) return;
+        ev.key===key && handleClick();
+    };
+    window.document.addEventListener('keydown', listener);
+    return () => window.document.removeEventListener('keydown', listener);
+});
+if (!visible) return false;
+const allowInput= disableHiding?'allow-input':'normal-button-hide';
 
 
-    const image= makeImage(icon,imageStyle,allowInput);
-    const iSize= iconButtonSize ? {'--IconButton-size': iconButtonSize} : {};
+const image= makeImage(icon,imageStyle,allowInput);
+const iSize= iconButtonSize ? {'--IconButton-size': iconButtonSize} : {};
 
-    // const image= icon ? <img src={icon} style={imageStyle} className={allowInput} /> : undefined;
-    const useIconButton= icon && !text;
-    // const dropDownIndicator= useDropDownIndicator ? makeImage(DROP_DOWN_ICON,undefined,allowInput) : undefined;
-    const dropDownIndicator= useDropDownIndicator ? <ArrowDropDownRoundedIcon sx={{transform:'scale(1.75)'}}/> : undefined;
+// const image= icon ? <img src={icon} style={imageStyle} className={allowInput} /> : undefined;
+const useIconButton= icon && !text;
+// const dropDownIndicator= useDropDownIndicator ? makeImage(DROP_DOWN_ICON,undefined,allowInput) : undefined;
+const dropDownIndicator= useDropDownIndicator ? <ArrowDropDownRoundedIcon sx={{transform:'scale(1.75)'}}/> : undefined;
 
-    // <ArrowDropDownRoundedIcon viewBox='8 8 10 10' sx={{position:'absolute', transform:'scale(1.5)', width:10,height:10, left:0, bottom:0}}/>
+// <ArrowDropDownRoundedIcon viewBox='8 8 10 10' sx={{position:'absolute', transform:'scale(1.5)', width:10,height:10, left:0, bottom:0}}/>
 
 
-    const tbCheckBoxProps= slotProps.tbCheckBox ?? {};
-    const iconButton= slotProps.iconButton ?? {};
+const tbCheckBoxProps= slotProps.tbCheckBox ?? {};
+const iconButton= slotProps.iconButton ?? {};
 
-    const b=  (
-        <Tooltip followCursor={true} title={tip} {...slotProps?.tooltip}>
-            <Stack {...{direction:'row', sx, value, alignItems:'center', ref:setupRef, position:'relative' }} {...slotProps?.root}>
-                <TbCheckBox {...{hasCheckBox, CheckboxOnIcon, CheckboxOffIcon, checkBoxOn, onClick:handleClick, ...tbCheckBoxProps}}/>
-                {useIconButton ?
-                    (<IconButton {...{
-                        sx: (theme) => (
-                             {minHeight:'unset', minWidth:'unset', p:1/4, backgroundColor:'transparent',
-                                 '& svg' : {
-                                     color: enabled?
-                                         theme.vars.palette[color]?.plainColor :
-                                         theme.vars.palette[color]?.softDisabledColor,
-                                 },
-                                 opacity: enabled ? '1' : '0.3',
-                                 ...makeBorder(active,theme,color),
-                                 ...iSize,
-                                 ['&[aria-pressed="true"]']: {
-                                     ...theme.variants.outlinedActive.neutral,
-                                     borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
-                                 },
-                                 ...iconButton?.sx
-                             }),
+const b=  (
+    <Tooltip followCursor={true} title={tip} {...slotProps?.tooltip}>
+        <Stack {...{direction:'row', sx, value, alignItems:'center', ref:setupRef, position:'relative' }} {...slotProps?.root}>
+            <TbCheckBox {...{hasCheckBox, CheckboxOnIcon, CheckboxOffIcon, checkBoxOn, onClick:handleClick, ...tbCheckBoxProps}}/>
+            {useIconButton ?
+                (<IconButton {...{
+                    sx: (theme) => (
+                         {minHeight:'unset', minWidth:'unset', p:1/4, backgroundColor:'transparent',
+                             '& svg' : {
+                                 color: enabled?
+                                     theme.vars.palette[color]?.plainColor :
+                                     theme.vars.palette[color]?.softDisabledColor,
+                             },
+                             opacity: enabled ? '1' : '0.3',
+                             ...makeBorder(active,theme,color),
+                             ...iSize,
+                             ['&[aria-pressed="true"]']: {
+                                 ...theme.variants.outlinedActive.neutral,
+                                 borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
+                             },
+                             ...iconButton?.sx
+                         }),
 
-                        className:'ff-toolbar-iconbutton ' + allowInput,
-                        value,
-                        component,
-                        variant:'soft', color:'neutral' ,
-                        'aria-pressed': buttonPressed ? 'true' : 'false',
-                        'aria-label':tip, onClick:handleClick, disabled:!enabled}}>
-                        {image}
-                    </IconButton>) :
-                    (Boolean(text || icon || shortcutKey || image) && <Button {...{color, variant, value,
+                    className:'ff-toolbar-iconbutton ' + allowInput,
+                    value,
+                    component,
+                    variant:'soft', color:'neutral' ,
+                    'aria-pressed': buttonPressed ? 'true' : 'false',
+                    'aria-label':tip, onClick:handleClick, disabled:!enabled}}>
+                    {image}
+                </IconButton>) :
+                (Boolean(text || icon || shortcutKey || image) && <Button {...{color, variant, value,
                         'aria-label':tip, disabled:!enabled, onClick:handleClick,
-                        size:'md',
+                        size:buttonSize,
                         className:'ff-toolbar-button ' + allowInput,
                         startDecorator: image,
                         component,
@@ -148,7 +148,7 @@ export function ToolbarButton(props) {
                         'aria-pressed':buttonPressed ? 'true' : 'false',
                         sx:(theme) => ({whiteSpace:'nowrap', py:1/4, minHeight: 'unset',
                             color: enabled? undefined : theme.vars.palette.neutral?.softDisabledColor,
-                            ...makeFontSettings(theme),
+                            ...makeFontSettings(theme,buttonSize),
                             ...makeBorder(active,theme,color),
                             ['&[aria-pressed="true"]']: {
                                 ...theme.variants.outlinedActive.neutral,
@@ -196,6 +196,7 @@ ToolbarButton.propTypes= {
     disableHiding: bool,
     shortcutKey: string,
     color: string,
+    buttonSize: string,
     iconButtonSize : string,
     ref: oneOfType([element,func]),
     slotProps: shape({
@@ -247,9 +248,9 @@ function makeBorder(active,theme,color) {
     return { border: `1px solid ${borderC}` };
 }
 
-function makeFontSettings(theme) {
+function makeFontSettings(theme,size) {
     return {
-        fontSize:theme.fontSize.md,
+        fontSize:theme.fontSize[size],
         fontWeight:theme.fontWeight.md,
     };
 }
diff --git a/src/firefly/js/visualize/HiPSMocUtil.js b/src/firefly/js/visualize/HiPSMocUtil.js
index 34b884622a..4d8ee6ba07 100644
--- a/src/firefly/js/visualize/HiPSMocUtil.js
+++ b/src/firefly/js/visualize/HiPSMocUtil.js
@@ -179,7 +179,8 @@ export function getMocOrderIndex(Nuniq) {
  * add new layer on MOC table
  * @param {Object} params moc table id
  * @param {string} params.tbl_id moc table id
- * @param {string} [params.title] optional title
+ * @param {string} [params.title] optional shorter title
+ * @param {string} [params.shortTitle] optional title
  * @param {string} params.fitsPath moc fits path at the server after upload
  * @param {string} params.mocUrl  moc fits url
  * @param {string} params.uniqColName column name for uniq number
@@ -189,7 +190,7 @@ export function getMocOrderIndex(Nuniq) {
  * @param {string} [params.mocGroupDefColorId ] - group color id
  * @returns {T|SelectInfo|*|{}}
  */
-export function addNewMocLayer({tbl_id, title, fitsPath, mocUrl, uniqColName = 'NUNIQ', maxFetchDepth,
+export function addNewMocLayer({tbl_id, title, shortTitle, fitsPath, mocUrl, uniqColName = 'NUNIQ', maxFetchDepth,
                                    tablePreloaded=false, color, mocGroupDefColorId }) {
     const dls = getDrawLayersByType(getDlAry(), HiPSMOC.TYPE_ID);
     let   dl = dls.find((oneLayer) => oneLayer.drawLayerId === tbl_id);
@@ -199,7 +200,7 @@ export function addNewMocLayer({tbl_id, title, fitsPath, mocUrl, uniqColName = '
         if (title) title= 'MOC - ' + title;
         const mocFitsInfo = {fitsPath, mocUrl, uniqColName, tbl_id, tablePreloaded};
         dl = dispatchCreateDrawLayer(HiPSMOC.TYPE_ID,
-            {mocFitsInfo,title,layersPanelLayoutId:'mocUIGroup', color, mocGroupDefColorId,maxFetchDepth});
+            {mocFitsInfo,title,shortTitle,layersPanelLayoutId:'mocUIGroup', color, mocGroupDefColorId,maxFetchDepth});
     }
     return dl;
 }
diff --git a/src/firefly/js/visualize/draw/DrawLayer.js b/src/firefly/js/visualize/draw/DrawLayer.js
index f19bbab1ee..1d2636c0f3 100644
--- a/src/firefly/js/visualize/draw/DrawLayer.js
+++ b/src/firefly/js/visualize/draw/DrawLayer.js
@@ -31,6 +31,7 @@ export const ColorChangeType= {DISABLE,DYNAMIC,STATIC};
  *                a drawing layer factory def should always pass the same type Id
  *                eg. all catalog overlays will by the same type of have different layer ids
  * @prop {String} title title to show in the ui
+ * @prop {String} shortTitle a smaller title for the legend
  * @prop {String[]} plotIdAry array of plotId that are layered
  * @prop {String[]} visiblePlotIdAry:  array of plotId that are visible, only ids in this array are visible
  * @prop {String[]} actionTypeAry  what actions that the reducer will allow through the drawing layer reducer
@@ -147,6 +148,7 @@ function makeDrawLayer(drawLayerId,
 
 
         title,
+        shortTitle: undefined,
         autoFormatTitle:true,
         plotIdAry: [],  // array of plotId that are layered
         visiblePlotIdAry: [], // array of plotId that are visible, only ids in this array are visible
diff --git a/src/firefly/js/visualize/iv/ImageViewer.jsx b/src/firefly/js/visualize/iv/ImageViewer.jsx
index b49ae96d39..8ce2a08959 100644
--- a/src/firefly/js/visualize/iv/ImageViewer.jsx
+++ b/src/firefly/js/visualize/iv/ImageViewer.jsx
@@ -62,7 +62,7 @@ function getStoreState(plotId, oldState) {
 
 const TEN_SECONDS= 10000;
 
-export const ImageViewer= memo( ({showWhenExpanded=false, plotId, makeToolbar}) => {
+export const ImageViewer= memo( ({showWhenExpanded=false, plotId, makeToolbar, makeLegend}) => {
 
     const [mousePlotId, setMousePlotId] = useState(lastMouseCtx().plotId);
     const {plotView,vr,drawLayersAry} = useStoreConnector( (oldState) => getStoreState(plotId,oldState) );
@@ -97,6 +97,7 @@ export const ImageViewer= memo( ({showWhenExpanded=false, plotId, makeToolbar})
     return (
         <ImageViewerView {...{plotView,
                          makeToolbar,
+                         makeLegend,
                          visRoot:vr,
                          drawLayersAry: deferredDrawLayersAry,
                          mousePlotId: deferredMousePlotId,
@@ -108,6 +109,8 @@ ImageViewer.displayName= 'ImageViewer';
 ImageViewer.propTypes= {
     plotId : PropTypes.string.isRequired,
     showWhenExpanded : PropTypes.bool,
+    makeToolbar : PropTypes.func,
+    makeLegend : PropTypes.func,
 };
 
 
diff --git a/src/firefly/js/visualize/iv/ImageViewerDecorate.jsx b/src/firefly/js/visualize/iv/ImageViewerDecorate.jsx
index f541ff9b7d..d7533fd492 100644
--- a/src/firefly/js/visualize/iv/ImageViewerDecorate.jsx
+++ b/src/firefly/js/visualize/iv/ImageViewerDecorate.jsx
@@ -17,7 +17,7 @@ import {getPlotGroupById}  from '../PlotGroup.js';
 import {ExpandType, dispatchChangeActivePlotView, MOUSE_CLICK_REASON} from '../ImagePlotCntlr.js';
 import {ExpandButton} from '../ui/Buttons.jsx';
 import {VisCtxToolbarView, ctxToolbarBG} from '../ui/VisCtxToolbarView';
-import {VisInlineToolbarView} from '../ui/VisInlineToolbarView.jsx';
+import {RightSidePvDecoration} from '../ui/RightSidePvDecoration.jsx';
 import {
     primePlot, isActivePlotView, getAllDrawLayersForPlot, getPlotViewById, canConvertBetweenHipsAndFits
 } from '../PlotViewUtil.js';
@@ -252,8 +252,8 @@ function ZoomGroup({visRoot, pv, show}) {
 }
 
 const ImageViewerDecorate= memo((props) => {
-    const {plotView:pv,drawLayersAry,extensionList,visRoot,mousePlotId, makeToolbar,
-        size:{width,height}}= props;
+    const {plotView:pv,drawLayersAry,extensionList,visRoot,mousePlotId,
+        makeToolbar, makeLegend, size:{width,height}}= props;
 
     const [showDelAnyway, setShowSelAnyway]= useState(false);
 
@@ -266,12 +266,12 @@ const ImageViewerDecorate= memo((props) => {
         setShowSelAnyway(true);
         const id= setTimeout(() => setShowSelAnyway(false), 5000);
         return () => clearTimeout(id);
-    },[mousePlotId]);
+    },[mousePlotId, visRoot]);
 
    const showDelete= pv.plotViewCtx.userCanDeletePlots;
     const ctxToolbar= contextToolbar(pv,drawLayersAry,extensionList,width, makeToolbar);
     const expandedToSingle= (visRoot.expandedMode===ExpandType.SINGLE);
-    const plot= primePlot(pv);
+    const plot= primePlot(pv)
     const iWidth= Math.trunc(width);
     const iHeight=Math.trunc(height);
 
@@ -310,7 +310,8 @@ const ImageViewerDecorate= memo((props) => {
                     {(plot) ? <PlotTitle brief={brief}  plotView={pv}/> : undefined}
                     <ZoomGroup visRoot={visRoot} pv={pv} show={showZoom} />
                 </Stack>
-                <VisInlineToolbarView pv={pv} showDelete={showDelete} deleteVisible={showDel}/>
+                <RightSidePvDecoration {...{pv, showDelete, deleteVisible:showDel, makeLegend }}/>
+
             </Stack>
         </Box>
         );
@@ -326,6 +327,7 @@ ImageViewerDecorate.propTypes= {
     mousePlotId : string,
     size : object.isRequired,
     makeToolbar: func,
+    makeLegend : func,
 };
 
 export const ImageViewerView= wrapResizeMonitor(ImageViewerDecorate,0);
diff --git a/src/firefly/js/visualize/saga/CoverageWatcher.js b/src/firefly/js/visualize/saga/CoverageWatcher.js
index eb96087fb9..8b0068bbe6 100644
--- a/src/firefly/js/visualize/saga/CoverageWatcher.js
+++ b/src/firefly/js/visualize/saga/CoverageWatcher.js
@@ -685,7 +685,8 @@ function addToCoverageDrawing(plotId, options, table, preparedTable, drawOp, vis
                                                    lookupOption(options, 'searchTarget', tbl_id),
                                                    lookupOption(options, 'overlayPosition', tbl_id)) : undefined;
 
-    const baseTitle= `Coverage: ${table?.title || tbl_id}`;
+    const shortTitle= table?.title || tbl_id;
+    const baseTitle= `Coverage: ${shortTitle}`;
 
     const createDrawLayer = (cId, dataType, visible, titleAddition='') => {
 
@@ -720,6 +721,7 @@ function addToCoverageDrawing(plotId, options, table, preparedTable, drawOp, vis
             layersPanelLayoutId,
             tbl_id,
             title,
+            shortTitle:shortTitle+titleAddition,
             color,
             symbol,
             size,
@@ -744,12 +746,12 @@ function addToCoverageDrawing(plotId, options, table, preparedTable, drawOp, vis
     if (covType === CoverageType.BOX) {
         createDrawLayer(coverageCatalogId(tbl_id), covType, catV);
     } else if (covType === CoverageType.X) {
-        createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,baseTitle,drawOp,options,catV);
+        createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,baseTitle,shortTitle,drawOp,options,catV);
     } else if (covType === CoverageType.ORBITAL_PATH) {
         createDrawLayer(coverageCatalogId(tbl_id), covType, catV);
     } else if (covType === CoverageType.REGION) {
         const regionV= isVisible(visibleMap,regionId(tbl_id));
-        createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,baseTitle+' positions',drawOp,options, catV);
+        createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,baseTitle+' positions',shortTitle+' positions',drawOp,options, catV);
         createDrawLayer(regionId(tbl_id),CoverageType.REGION,regionV,' regions');
     }
 
@@ -774,13 +776,13 @@ function addToCoverageDrawing(plotId, options, table, preparedTable, drawOp, vis
 const isVisible= (visibleMap, catalogId) => visibleMap[catalogId] ?? true;
 
 
-function createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,title,drawOp,options,visible) {
+function createHpxDrawLayer(tbl_id,plotId,layersPanelLayoutId,title,shortTitle,drawOp,options,visible) {
     const catalogId= coverageCatalogId(tbl_id);
     const dl = getDlAry().find((dl) => (dl.drawLayerTypeId === HpxCatalog.TYPE_ID) && dl.catalogId === catalogId);
     if (dl) return;
     const {color,symbol,size}= getColorSymbolSize(drawOp,options,catalogId,tbl_id);
     dispatchCreateDrawLayer(HpxCatalog.TYPE_ID, {
-        catalogId, layersPanelLayoutId, tbl_id, title, color, symbol, size });
+        catalogId, layersPanelLayoutId, tbl_id, title, shortTitle, color, symbol, size });
     dispatchAttachLayerToPlot(catalogId, plotId, false, visible);
 }
 
diff --git a/src/firefly/js/visualize/task/PlotHipsTask.js b/src/firefly/js/visualize/task/PlotHipsTask.js
index 429584e468..da399d1ef4 100644
--- a/src/firefly/js/visualize/task/PlotHipsTask.js
+++ b/src/firefly/js/visualize/task/PlotHipsTask.js
@@ -283,12 +283,12 @@ async function makeHiPSPlot(rawAction, dispatcher) {
 
 
 
-export function createHiPSMocLayerFromPreloadedTable({tbl_id,title, fitsPath, mocUrl, plotId, visible=false,
+export function createHiPSMocLayerFromPreloadedTable({tbl_id,title, shortTitle, fitsPath, mocUrl, plotId, visible=false,
                                                          maxFetchDepth, color, mocGroupDefColorId, attachAllPlot=false} ) {
     const table= getTblById(tbl_id);
     if (!table || table.isFetching) return;
     const uniqColName= table.tableData.columns[0].name;
-    const dl = addNewMocLayer({ tbl_id, title, fitsPath, mocUrl, uniqColName,
+    const dl = addNewMocLayer({ tbl_id, title, shortTitle, fitsPath, mocUrl, uniqColName,
         color, tablePreloaded:true,  maxFetchDepth, mocGroupDefColorId });
     if (dl && plotId) {
         dispatchAttachLayerToPlot(dl.drawLayerId, plotId, attachAllPlot, visible, true);
diff --git a/src/firefly/js/visualize/ui/CoveraeViewer.jsx b/src/firefly/js/visualize/ui/CoveraeViewer.jsx
index 068b46b527..a50b64faf4 100644
--- a/src/firefly/js/visualize/ui/CoveraeViewer.jsx
+++ b/src/firefly/js/visualize/ui/CoveraeViewer.jsx
@@ -22,6 +22,7 @@ import {getActiveTableId, getBooleanMetaEntry, getTblById, getTblIdsByGroup} fro
 import {getAppOptions} from '../../core/AppDataCntlr.js';
 import {MetaConst} from '../../data/MetaConst.js';
 import {getComponentState} from '../../core/ComponentCntlr.js';
+import {SmallLegend} from './SmallLegend';
 
 
 const startWatcher= once((viewerId) => {
@@ -80,6 +81,7 @@ export function CoverageViewer({viewerId=DEFAULT_COVERAGE_VIEWER_ID,noCovMessage
                                   insideFlex={true}
                                   canReceiveNewPlots={NewPlotMode.replace_only.key}
                                   controlViewerMounting={false}
+                                  Legend={SmallLegend}
                                   Toolbar={MultiViewStandardToolbar}/>
             </Stack>
         );
diff --git a/src/firefly/js/visualize/ui/DrawLayerItemView.jsx b/src/firefly/js/visualize/ui/DrawLayerItemView.jsx
index 5b5f299fe1..7f0dfac1f2 100644
--- a/src/firefly/js/visualize/ui/DrawLayerItemView.jsx
+++ b/src/firefly/js/visualize/ui/DrawLayerItemView.jsx
@@ -2,10 +2,12 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
+import {isString} from 'lodash';
 import React from 'react';
 import {Box, ChipDelete, Divider, Stack, Switch, Tooltip, Typography} from '@mui/joy';
 import PropTypes from 'prop-types';
 import {getTitleTag, makeColorChange, makeShape} from './DrawLayerUIComponents';
+import Layers from '@mui/icons-material/Layers';
 
 
 export function DrawLayerItemView({maxTitleChars, lastItem, deleteLayer,
@@ -64,8 +66,46 @@ DrawLayerItemView.propTypes= {
 
 
 
-function makeColorChangeUIElement(color, canUserChangeColor, modifyColor) {
-    return canUserChangeColor ? makeColorChange(color,modifyColor, {width: 'calc(33%)'}) : false;
+export function DrawLayerLegendView({maxTitleChars, color, canUserChangeColor, title, tip='',
+                                      autoFormatTitle, canUserHide=true, visible, changeVisible, modifyColor}) {
+
+    const sx= { width:1, height:1, pr:1.5, position: 'relative', overflow:'hidden', whiteSpace : 'nowrap'};
+    const tipTitle=  (
+        <Stack>
+            {
+                isString(tip)
+                    ? <Typography>{tip}</Typography>
+                    : <div>{tip}</div>
+            }
+            <Typography component='div'>More options under the layers (
+                <Layers viewBox={'2 0 22 20'}/>
+                ) button</Typography>
+        </Stack>
+    );
+
+    return (
+        <Box sx={sx}>
+            <Stack {...{lineHeight:'1em', position: 'relative', direction:'row', flexWrap:'nowrap',
+                justifyContent: 'space-between', alignItems: 'center', width:'100%' }} >
+                <Tooltip title={tipTitle}>
+                    <Stack {...{direction: 'row', alignItems: 'center'}}>
+                        <Switch {...{checked:visible, size:'sm', sx:{visibility: canUserHide?'inherit':'hidden', pr:.5},
+                            onChange:() => changeVisible() }} />
+                        {getTitleTag(title,maxTitleChars, autoFormatTitle, 'body-xs', {minWidth:undefined})}
+                    </Stack>
+                </Tooltip>
+                <Stack {...{direction:'row', spacing:1/4, py:.5, width: '2em', justifyContent: 'flex-end'}}>
+                    {makeColorChangeUIElement(color, canUserChangeColor,modifyColor,'')}
+                </Stack>
+            </Stack>
+        </Box>
+    );
+}
+
+
+
+function makeColorChangeUIElement(color, canUserChangeColor, modifyColor, text) {
+    return canUserChangeColor ? makeColorChange(color,modifyColor, {width: 'calc(33%)'},text) : false;
 }
 
 function makePointDataShape(isPointData, drawingDef, modifyShape) {
@@ -87,7 +127,7 @@ function makeHelpLine(helpLine) {
 }
 
 function makeDelete(canUserDelete,deleteLayer) {
-    if (!canUserDelete) return <Box sx={{width:23}}/>
+    if (!canUserDelete) return <Box sx={{width:23}}/>;
     return (
         <Tooltip title='Close Layer'
             placement='right-start'>
diff --git a/src/firefly/js/visualize/ui/DrawLayerUIComponents.jsx b/src/firefly/js/visualize/ui/DrawLayerUIComponents.jsx
index 6ed4ede480..9c81ee9ceb 100644
--- a/src/firefly/js/visualize/ui/DrawLayerUIComponents.jsx
+++ b/src/firefly/js/visualize/ui/DrawLayerUIComponents.jsx
@@ -19,12 +19,15 @@ import {
 const symbolSize= 10;
 
 
-export function makeColorChange(color, modifyColor, sx= {}) {
+export function makeColorChange(color, modifyColor, sx= {}, text='Color') {
     const feedBackStyle= { width:symbolSize, height:symbolSize, backgroundColor: color};
+    if (!text) {
+        return <Chip onClick={() => modifyColor()}> <div style={feedBackStyle} /> </Chip> ;
+    }
     return (
-            <Chip onClick={() => modifyColor()} sx={{px:.5}} startDecorator={<div style={feedBackStyle} />}>
-                Color
-            </Chip>
+        <Chip onClick={() => modifyColor()} sx={{px:.5}} startDecorator={<div style={feedBackStyle} />}>
+            {text}
+        </Chip>
     );
 
 }
@@ -135,7 +138,7 @@ export function modifyDrawColor(inDl, plotId, tbl_id, postTitle, topComponent) {
     });
 }
 
-export function getTitleTag(title, maxTitleChars, autoFormatTitle) {
+export function getTitleTag(title, maxTitleChars, autoFormatTitle, level, sx) {
     if (!autoFormatTitle) {
         return isFunction(title) ? title() : title;
     }
@@ -144,8 +147,13 @@ export function getTitleTag(title, maxTitleChars, autoFormatTitle) {
     return (
         <Typography {...{
             component:'div',
-            whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden',
-            minWidth: minW + 'em', maxWidth: maxW + 'em'}}>
+            level,
+            sx : {
+                whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden',
+                minWidth: minW + 'em', maxWidth: maxW + 'em',
+                ...sx
+            },
+            }}>
             {title}
         </Typography>
     );
diff --git a/src/firefly/js/visualize/ui/MultiImageViewer.jsx b/src/firefly/js/visualize/ui/MultiImageViewer.jsx
index 784537e00d..dd619fcd80 100644
--- a/src/firefly/js/visualize/ui/MultiImageViewer.jsx
+++ b/src/firefly/js/visualize/ui/MultiImageViewer.jsx
@@ -3,8 +3,8 @@
  */
 
 import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import {isEmpty,omit} from 'lodash';
+import {bool, number, string, func} from 'prop-types';
+import {isEmpty} from 'lodash';
 import {flux} from '../../core/ReduxFlux.js';
 import {
     NewPlotMode, dispatchAddViewer, dispatchViewerUnmounted,
@@ -37,11 +37,11 @@ function viewWithIdMounted(itemId) {
 }
 
 
-export class MultiImageViewer extends PureComponent {
+export class MultiImageViewer extends PureComponent {//todo: turn this into a functional component
 
     constructor(props) {
         super(props);
-        this.state= {viewer : null};
+        this.state= {viewer : undefined};
     }
 
 
@@ -72,7 +72,6 @@ export class MultiImageViewer extends PureComponent {
                 }
             }, 5);
         }
-
     }
 
     componentWillUnmount() {
@@ -99,42 +98,37 @@ export class MultiImageViewer extends PureComponent {
     render() {
         const {viewerId,tableId,gridDefFunc,handleToolbar=true}= this.props;
         const {viewer,visRoot,dlAry}= this.state;
-        const layoutType= getLayoutType(getMultiViewRoot(),viewerId,tableId);
-        if (!viewer) return false;
-        if (isEmpty(viewer.itemIdAry)) {
+        if (isEmpty(viewer?.itemIdAry)) {
             if (!gridDefFunc) return false;
-            if (isEmpty(gridDefFunc([]))) return false; // it is possible the function will returns some messages
+            if (isEmpty(gridDefFunc([]))) return false; // it is possible the function will return some messages
         }
-        const newProps= omit(this.props, ['viewerPlotIds']);
-        const aId= viewer.itemIdAry.find( (id) => getPlotViewById(visRoot,id));
-        const pv= getPlotViewById(visRoot, aId);
-        if (!pv) return false;
+        if (!viewer?.itemIdAry.find( (id) => getPlotViewById(visRoot,id))) return false; //make sure a least one id has a PlotView
         return (
-            <MultiImageViewerView {...newProps}
-                                  viewerPlotIds={viewer.itemIdAry}
-                                  layoutType={layoutType}
-                                  handleToolbar={handleToolbar}
-                                  scrollGrid={viewer?.scroll ?? false}
-                                  visRoot={visRoot}
-                                  ref={(c) => this.rootWidget= c}
-                                  dlAry={dlAry}
+            <MultiImageViewerView {...{
+                ...this.props, handleToolbar, visRoot, dlAry,
+                layoutType: getLayoutType(getMultiViewRoot(),viewerId,tableId),
+                viewerPlotIds: viewer.itemIdAry,
+                scrollGrid: viewer.scroll,
+                ref: (c) => this.rootWidget= c,
+            }}
             />
         );
     }
 }
 
 MultiImageViewer.propTypes= {
-    viewerId : PropTypes.string.isRequired,
-    canReceiveNewPlots : PropTypes.string,
-    Toolbar : PropTypes.func,
-    handleToolbar : PropTypes.bool,
-    forceRowSize : PropTypes.number,
-    forceColSize : PropTypes.number,
-    gridDefFunc : PropTypes.func,
-    insideFlex : PropTypes.bool,
-    closeFunc : PropTypes.func,
-    tableId : PropTypes.string,
-    controlViewerMounting : PropTypes.bool
+    viewerId : string.isRequired,
+    canReceiveNewPlots : string,
+    Toolbar : func,
+    Legend : func,
+    handleToolbar : bool,
+    forceRowSize : number,
+    forceColSize : number,
+    gridDefFunc : func,
+    insideFlex : bool,
+    closeFunc : func,
+    tableId : string,
+    controlViewerMounting : bool
 };
 
 // function gridDefFunc(plotIdAry) : [ {title :string, plotId:[string]}]
diff --git a/src/firefly/js/visualize/ui/MultiImageViewerView.jsx b/src/firefly/js/visualize/ui/MultiImageViewerView.jsx
index 359e4edb01..ddae5988e9 100644
--- a/src/firefly/js/visualize/ui/MultiImageViewerView.jsx
+++ b/src/firefly/js/visualize/ui/MultiImageViewerView.jsx
@@ -5,8 +5,9 @@
 
 import {Stack} from '@mui/joy';
 import React, {useRef} from 'react';
-import PropTypes from 'prop-types';
+import {object, arrayOf, bool, func, number, oneOf, string, elementType, any} from 'prop-types';
 import {omit} from 'lodash';
+import {checkProps} from '../../ui/SimpleComponent';
 import {SINGLE, GRID, getMultiViewRoot, getViewer} from '../MultiViewCntlr.js';
 import {primePlot} from '../PlotViewUtil.js';
 import {MultiItemViewerView} from './MultiItemViewerView.jsx';
@@ -29,89 +30,70 @@ function makeState() {
 }
 
 export function MultiImageViewerView(props)  {
+    checkProps(props, MultiImageViewerView);
 
     const {current:elementWrapper}= useRef({element:undefined});
     const {readout, readoutData, readoutShowing}= useMouseStoreConnector(makeState);
-    const {Toolbar, visRoot, viewerPlotIds=[], showWhenExpanded=false, mouseReadoutEmbedded=true,
-        handleToolbar=true, layoutType=GRID, scrollGrid, viewerId, ref}= props;
+    const {Toolbar, Legend, visRoot, viewerPlotIds=[], showWhenExpanded=false, mouseReadoutEmbedded=true,
+        handleToolbar=true, layoutType=GRID, scrollGrid=false, viewerId, ref}= props;
 
-    const viewer= getViewer(getMultiViewRoot(),viewerId);
+    const viewer= getViewer(getMultiViewRoot(),viewerId) ?? {};
     const {bottomUIComponent}= viewer ?? {};
 
-    const makeToolbar = Toolbar ? () => (<Toolbar {...{...props, containerElement:elementWrapper?.element}} />) : undefined;
-    const makeItemViewer = (plotId) => ( <ImageViewer {...{plotId, key:plotId, makeToolbar, showWhenExpanded}} /> );
-    const makeItemViewerFull = (plotId) => ( <ImageViewer {...{plotId, key:plotId,showWhenExpanded,makeToolbar} } /> );
+    const makeToolbar = Toolbar && (() => (<Toolbar {...{...props, containerElement:elementWrapper?.element}} />));
+    const makeLegend =  Legend && (() => (<Legend {...{...props}}/>));
+    const makeItemViewer = (plotId) => ( <ImageViewer {...{plotId, key:plotId, makeToolbar, makeLegend, showWhenExpanded}} /> );
 
-    const doReadoutAndShowing= readoutShowing && viewerPlotIds.includes(readoutData?.plotId);
+    const newProps = {...omit(props, ['Toolbar', 'visRoot', 'viewerPlotIds', 'showWhenExpanded']),
+        activeItemId: visRoot.activePlotId, viewerItemIds: viewerPlotIds,
+        makeToolbar:handleToolbar?makeToolbar:undefined, makeItemViewer, makeItemViewerFull:makeItemViewer};
 
-    const newProps = Object.assign(omit(props, ['Toolbar', 'visRoot', 'viewerPlotIds', 'showWhenExpanded']),
-        {activeItemId: visRoot.activePlotId, viewerItemIds: viewerPlotIds,
-            makeToolbar:handleToolbar?makeToolbar:undefined, makeItemViewer, makeItemViewerFull});
+    const insideStyle= props.insideFlex ? {flex:'1 1 auto', maxWidth:'100%'} : {width:'100%', height:'100%'};
+    const style= { display:'flex', flexDirection:'column', position:'relative', ...insideStyle, ...props.style };
 
-    let style= {display:'flex', flexDirection:'column', position:'relative'};
-    if (props.insideFlex) {
-        style= {...style, flex:'1 1 auto', maxWidth:'100%', ...props.style};
-    }
-    else {
-        style=  {...style, width:'100%', height:'100%', ...props.style};
-    }
+    const pvToUseForReadout= isLockByClick(readout) ? primePlot(visRoot) : primePlot(visRoot,lastMouseCtx().plotId);
+    const one= layoutType===SINGLE || viewerPlotIds?.length===1;
+    const sStyle= {
+        position: 'absolute',
+        left: 3,
+        bottom:one ? 2 : 3, 
+        right: one ? 3 : scrollGrid? 15 : 6, 
+    };
     
-    const {readoutPref}= readoutRoot();
-    const pvToUse= isLockByClick(readoutRoot()) ? primePlot(visRoot) : primePlot(visRoot,lastMouseCtx().plotId);
-    const radix= getFluxRadix(readoutPref, pvToUse);
-
-
-    const mouseReadout= (
-        <MouseReadoutBottomLine readout={readout} readoutData={readoutData}
-                                readoutShowing={doReadoutAndShowing}
-                                showOnInactive={!mouseReadoutEmbedded}
-                                scrollGrid={scrollGrid}
-                                radix={radix}
-                                slightlyTransparent={mouseReadoutEmbedded} />
+    return (
+        <div className='MultiImageViewer' style={style} ref={(e) => elementWrapper.element= e}>
+            <MultiItemViewerView {...{...newProps, ref, insideFlex:true, style:props.style}} />
+            <Stack spacing={one?1:undefined} style={mouseReadoutEmbedded? sStyle:{}} >
+                {bottomUIComponent?.()}
+                <MouseReadoutBottomLine {...{readout, readoutData, scrollGrid,
+                                        readoutShowing: readoutShowing && viewerPlotIds.includes(readoutData?.plotId),
+                                        showOnInactive:!mouseReadoutEmbedded,
+                                        radix: getFluxRadix(readout.readoutPref, pvToUseForReadout),
+                                        slightlyTransparent: mouseReadoutEmbedded  }}/>
+            </Stack>
+        </div>
     );
-
-    if (layoutType===SINGLE || viewerPlotIds?.length===1) {
-        return (
-            <div style={style} ref={(e) => elementWrapper.element= e}>
-                <MultiItemViewerView {...{...newProps, ref, insideFlex:true, style:props.style}} />
-                <Stack spacing={1} style={mouseReadoutEmbedded? {position:'absolute', left:3, right:3, bottom:2}:{}} >
-                    {bottomUIComponent?.()}
-                    {mouseReadout}
-                </Stack>
-            </div>
-        );
-    }
-    else {
-        return (
-            <div className={'MultiImageViewer'} style={style} ref={(e) => elementWrapper.element= e}>
-                <MultiItemViewerView {...{...newProps, ref, insideFlex:true, style:props.style}} />
-                <Stack style={ mouseReadoutEmbedded?{position:'absolute', left:3, bottom:3, right:scrollGrid?15:6}:{}} >
-                    {bottomUIComponent?.()}
-                    {mouseReadout}
-                </Stack>
-            </div>
-        );
-    }
 }
 
 MultiImageViewerView.propTypes= {
-    visRoot : PropTypes.object,
-    viewerPlotIds : PropTypes.arrayOf(PropTypes.string).isRequired,
-    showWhenExpanded : PropTypes.bool,
-
-    Toolbar : PropTypes.func,
-    viewerId : PropTypes.string.isRequired,
-    style : PropTypes.object,
-    defaultDecoration : PropTypes.bool,
-    layoutType : PropTypes.oneOf([GRID,SINGLE]),
-    forceRowSize : PropTypes.number,   //optional - force a certain number of rows
-    forceColSize : PropTypes.number,  //optional - force a certain number of columns
-    gridDefFunc : PropTypes.func,  // optional - a function to return the grid definition
-    gridComponent : PropTypes.object,  // a react element to define the grid - not implemented, just an idea
-    insideFlex :  PropTypes.bool,
-    handleToolbar: PropTypes.bool,
-    scrollGrid: PropTypes.bool,
-    mouseReadoutEmbedded: PropTypes.bool
+    visRoot : object,
+    viewerPlotIds : arrayOf(string).isRequired,
+    showWhenExpanded : bool,
+    Toolbar : elementType,
+    Legend : elementType,
+    viewerId : string.isRequired,
+    style : object,
+    defaultDecoration : bool,
+    layoutType : oneOf([GRID,SINGLE]),
+    forceRowSize : number,   //optional - force a certain number of rows
+    forceColSize : number,  //optional - force a certain number of columns
+    gridDefFunc : func,  // optional - a function to return the grid definition
+    gridComponent : object,  // a React element to define the grid - not implemented, just an idea
+    insideFlex :  bool,
+    handleToolbar: bool,
+    scrollGrid: bool,
+    mouseReadoutEmbedded: bool,
+    ref: any,
 };
 
 
diff --git a/src/firefly/js/visualize/ui/MultiItemViewerView.jsx b/src/firefly/js/visualize/ui/MultiItemViewerView.jsx
index c55cb49192..196a31f40a 100644
--- a/src/firefly/js/visualize/ui/MultiItemViewerView.jsx
+++ b/src/firefly/js/visualize/ui/MultiItemViewerView.jsx
@@ -5,7 +5,8 @@
 
 import {debounce} from 'lodash';
 import React, {useEffect, useRef, useState} from 'react';
-import PropTypes from 'prop-types';
+import {bool, number, string, object, func, oneOf, arrayOf, any} from 'prop-types';
+import {checkProps} from '../../ui/SimpleComponent';
 import {SINGLE, GRID} from '../MultiViewCntlr.js';
 import {Divider, Stack} from '@mui/joy';
 
@@ -23,7 +24,7 @@ const defDecStyle= {
 
 
 export function MultiItemViewerView(props)  {
-
+    checkProps(props, MultiItemViewerView);
     const {current:gridContainerElement}= useRef({element:undefined});
     const [,setWindowWidth]= useState(window?.innerWidth??1000);
     const {layoutType, activeItemId,
@@ -31,7 +32,6 @@ export function MultiItemViewerView(props)  {
         style, insideFlex=false, defaultDecoration=true, sparseGridTitleLocation= 'top',
         scrollGrid=false, ref,
         makeToolbar, makeItemViewer, makeItemViewerFull, autoRowOriented=true}= props;
-    let wrapperStyle;
 
     useEffect(() => {
         if (!scrollGrid) return;
@@ -41,14 +41,12 @@ export function MultiItemViewerView(props)  {
         return () => {
             window.removeEventListener('resize', browserResizeCallback);
         };
-    },[]);
+    },[]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const wrapperStyle= insideFlex
+        ? {...flexContainerStyle, flex:'1 1 auto'}
+        : {...flexContainerStyle, width:'100%', height:'100%'};
 
-    if (insideFlex) {
-        wrapperStyle= Object.assign({}, flexContainerStyle, {flex:'1 1 auto'});
-    }
-    else {
-        wrapperStyle= Object.assign({}, flexContainerStyle, {width:'100%', height:'100%'});
-    }
     let container;
     if (!viewerItemIds.length && !gridDefFunc) {
         container= false;
@@ -74,13 +72,8 @@ export function MultiItemViewerView(props)  {
         container= makePackedGrid(viewerItemIds,rows,forceColSize,true,makeItemViewer);
     }
     else if (scrollGrid) {
-        let cols;
-        const {width:containerWidth}= gridContainerElement?.element ?
-            gridContainerElement.element.getBoundingClientRect() : {width:0,height:0};
-        if (viewerItemIds.length>16) cols=4;
-        else if (viewerItemIds.length>5) cols=3;
-        else cols=2;
-        container= makeScrollGrid(viewerItemIds,cols,containerWidth, makeItemViewer);
+        const {width:containerWidth=0}= gridContainerElement?.element?.getBoundingClientRect() ?? {};
+        container= makeScrollGrid(viewerItemIds,containerWidth, makeItemViewer);
     }
     else {                   // GRID automatic
         const dim= findAutoGridDim(viewerItemIds.length, autoRowOriented);
@@ -107,26 +100,27 @@ export function MultiItemViewerView(props)  {
 }
 
 MultiItemViewerView.propTypes= {
-    viewerId : PropTypes.string.isRequired,
-    style : PropTypes.object,
-    defaultDecoration : PropTypes.bool,
-    layoutType : PropTypes.oneOf([GRID,SINGLE]),
-    forceRowSize : PropTypes.number,   //optional - force a certain number of rows
-    forceColSize : PropTypes.number,  //optional - force a certain number of columns
-    makeCustomLayout : PropTypes.func,  //optional - a function to present the items in a custom layout
-    gridDefFunc : PropTypes.func,  // optional - a function to return the grid definition
-    gridComponent : PropTypes.object,  // an element to define the grid - not implemented, just an idea
-    scrollGrid: PropTypes.bool,
-    insideFlex :  PropTypes.bool,
-    autoRowOriented: PropTypes.bool,
-
-    viewerItemIds : PropTypes.arrayOf(PropTypes.string).isRequired,
-    activeItemId : PropTypes.string,
-    makeToolbar : PropTypes.func,
-    makeItemViewer : PropTypes.func,
-    makeItemViewerFull : PropTypes.func,
-    eventCallback: PropTypes.object,
-    sparseGridTitleLocation : PropTypes.oneOf(['top', 'left', 'off', ''])
+    viewerId : string.isRequired,
+    style : object,
+    defaultDecoration : bool,
+    layoutType : oneOf([GRID,SINGLE]),
+    forceRowSize :number,   //optional - force a certain number of rows
+    forceColSize : number,  //optional - force a certain number of columns
+    makeCustomLayout : func,  //optional - a function to present the items in a custom layout
+    gridDefFunc : func,  // optional - a function to return the grid definition
+    gridComponent : object,  // an element to define the grid - not implemented, just an idea
+    scrollGrid: bool,
+    insideFlex :  bool,
+    autoRowOriented: bool,
+
+    viewerItemIds : arrayOf(string).isRequired,
+    activeItemId : string,
+    makeToolbar : func,
+    makeItemViewer : func,
+    makeItemViewerFull : func,
+    eventCallback: object,
+    sparseGridTitleLocation : oneOf(['top', 'left', 'off', '']),
+    ref: any,
 };
 
 
@@ -143,7 +137,13 @@ function makePackedGrid(viewerItemIds,rows,cols, columnBased,makeItemViewer) {
         rowBasedIvAry(viewerItemIds,rows,percentWidth,percentHeight,width,height,makeItemViewer);
 }
 
-function makeScrollGrid(viewerItemIds,cols,containerWidth, makeItemViewer) {
+function makeScrollGrid(viewerItemIds,containerWidth, makeItemViewer) {
+    const cols =
+        viewerItemIds.length>16
+            ? 4
+            : viewerItemIds.length>5
+                ? 3
+                : 2;
     const size= 100/cols;
     const sizePx= containerWidth ? Math.trunc((size/100)*containerWidth-2) : 0;
     const width= `calc(${size}% - 2px)`;
@@ -225,7 +225,7 @@ function findAutoGridDim(size, rowOriented=true) {
  *  an empty element will act as a placeholder in the row.
  *
  * @param {Array} viewerItemIds
- * @param {Array.<{string,string[]}>} gridDef
+ * @param {Array.<{title:string,plotIdAry:string[],noDataMessage:string,size:number}>} gridDef
  * @param {Function} makeItemViewer
  * @param sparseGridTitleLocation
  */
diff --git a/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx b/src/firefly/js/visualize/ui/RightSidePvDecoration.jsx
similarity index 69%
rename from src/firefly/js/visualize/ui/VisInlineToolbarView.jsx
rename to src/firefly/js/visualize/ui/RightSidePvDecoration.jsx
index c6176ec19a..d54fc77852 100644
--- a/src/firefly/js/visualize/ui/VisInlineToolbarView.jsx
+++ b/src/firefly/js/visualize/ui/RightSidePvDecoration.jsx
@@ -5,7 +5,7 @@
 import {Box, ChipDelete, Stack, Typography} from '@mui/joy';
 import {isString} from 'lodash';
 import React, {memo} from 'react';
-import {object, bool, number, string} from 'prop-types';
+import {object, bool, number, string, func} from 'prop-types';
 import {showInfoPopup} from '../../ui/PopupUtil';
 import {PlotAttribute} from '../PlotAttribute';
 import {makeMouseStatePayload, fireMouseCtxChange, MouseState} from '../VisMouseSync.js';
@@ -16,8 +16,8 @@ import {WarningButton} from './Buttons';
 
 
 
-export const VisInlineToolbarView = memo( (props) => {
-        const {pv, showDelete,deleteVisible, topOffset=0}= props;
+export const RightSidePvDecoration = memo( (props) => {
+        const {pv, showDelete,deleteVisible, makeLegend}= props;
         if (!pv) return undefined;
         const deleteClick= () => {
             const mouseStatePayload= makeMouseStatePayload(undefined,MouseState.EXIT,undefined,0,0,'');
@@ -32,17 +32,24 @@ export const VisInlineToolbarView = memo( (props) => {
         };
 
         const warnAry= getWarningsAry(pv);
-        if (!showDelete && !warnAry?.length) return;
+        if (!showDelete && !warnAry?.length && !makeLegend?.()) return;
 
         return (
-            <Box style={{ top: topOffset, position : 'absolute', right : 0}}>
-                <Stack {...{direction:'row', alignItems:'center',
-                        position: 'relative', sx:{verticalAlign: 'top', zIndex : 1} }}>
-                    <WarningsAlert pv={pv}/>
-                    {showDelete &&
-                        <ChipDelete onClick={deleteClick}
-                                    sx={{alignSelf:'flex-start', minHeight:12, minWidth:12, p:.5, ...deleteStyle}}
-                                    title='Remove Image'/>}
+            <Box style={{ top: 0, position : 'absolute', right : 0}}>
+                <Stack {...{sx: {zIndex : 1, position: 'relative'}}}>
+                    <Stack {...{direction:'row', alignItems:'center',  sx:{verticalAlign: 'top'} }}>
+                        <WarningsAlert pv={pv}/>
+                        {showDelete &&
+                            <ChipDelete onClick={deleteClick}
+                                        sx={{alignSelf:'flex-start', minHeight:12, minWidth:12, p:.5, ...deleteStyle}}
+                                        title='Remove Image'/>}
+                    </Stack>
+                    { makeLegend &&
+                        <Box style={{ top: 40, position : 'absolute', right : 0}}>
+                            {makeLegend()}
+                        </Box>
+                    }
+
                 </Stack>
             </Box>
         );
@@ -87,10 +94,11 @@ function WarningsAlert({pv}) {
 
 
 
-VisInlineToolbarView.propTypes= {
+RightSidePvDecoration.propTypes= {
     pv : object,
     showDelete : bool,
     deleteVisible : bool,
     help_id : string,
-    topOffset: number
+    topOffset: number,
+    makeLegend : func,
 };
diff --git a/src/firefly/js/visualize/ui/SmallLegend.jsx b/src/firefly/js/visualize/ui/SmallLegend.jsx
new file mode 100644
index 0000000000..1a9179ee07
--- /dev/null
+++ b/src/firefly/js/visualize/ui/SmallLegend.jsx
@@ -0,0 +1,113 @@
+
+import {isString} from 'lodash';
+import React from 'react';
+import {Card, Divider, Stack, Switch, Typography} from '@mui/joy';
+import Catalog from '../../drawingLayers/Catalog';
+import HpxCatalog from '../../drawingLayers/hpx/HpxCatalog';
+import HiPSMOC from '../../drawingLayers/HiPSMOC.js';
+import {DropDownToolbarButton} from '../../ui/DropDownToolbarButton';
+import BrowserInfo from '../../util/BrowserInfo';
+import {PlotAttribute} from '../PlotAttribute';
+import {
+    getActivePlotView, getAllDrawLayersForPlot, getLayerTitle, getPlotViewById, isDrawLayerVisible, primePlot
+} from '../PlotViewUtil';
+import {DrawLayerLegendView} from './DrawLayerItemView';
+import {changeVisible, modifyDrawColor} from './DrawLayerUIComponents';
+import {SelectAreaDropDownView} from './SelectAreaDropDownView';
+
+
+
+
+export function SmallLegend({dlAry, visRoot, menuItemKeys={}}) {
+
+    const pv= getActivePlotView(visRoot);
+    if (!pv) return;
+    const {plotId}= pv;
+    const {legendSelectArea}= menuItemKeys;
+    const layers= getAllDrawLayersForPlot(dlAry,plotId).filter( ({drawLayerTypeId}) =>
+        drawLayerTypeId===HiPSMOC.TYPE_ID ||
+        drawLayerTypeId===HpxCatalog.TYPE_ID ||
+        drawLayerTypeId===Catalog.TYPE_ID);
+
+    const hasLayers= Boolean(layers.length);
+
+    if (!hasLayers && !legendSelectArea) return;
+
+    const maxTitleChars= layers.reduce( (max,l) => {
+        const t= getLayerTitle(pv.plotId,l);
+        let tLen= 0;
+        if (t) tLen= l.autoFormatTitle? t.length : 30;
+        return Math.max(max, tLen);
+    },20);
+
+    const sx= (theme) => ({
+        '--Card-padding': '.5rem',
+        mr:.25,
+        overflow:'hidden',
+        backgroundColor: BrowserInfo.supportsCssColorMix() ?
+            `color-mix(in srgb, ${theme.vars.palette.neutral.softBg} 90%, transparent)` :
+            theme.vars.palette.neutral.softBg,
+    });
+
+
+
+    return (
+        <Card sx={sx}>
+            <Stack>
+                {hasLayers && layers.map( (dl) => (
+                    <DrawLayerLegendView {...{
+                        maxTitleChars,
+                        color: dl.drawingDef.color,
+                        canUserChangeColor: dl.canUserChangeColor,
+                        title: getShortTitle(plotId,dl),
+                        tip: getLayerTitle(plotId,dl),
+                        autoFormatTitle: dl.autoFormatTitle,
+                        canUserHide: dl.canUserHide,
+                        visible: isDrawLayerVisible(dl,plotId),
+                        changeVisible: () => changeVisible(dl, !isDrawLayerVisible(dl,plotId),plotId ),
+                        modifyColor: () => modifyDrawColor(dl,pv.plotId,dl.tbl_id),
+                    }}/>
+                )) }
+                {legendSelectArea && <SelectArea pv={pv} hasLayers={hasLayers}/> }
+            </Stack>
+        </Card>
+    );
+}
+
+function SelectArea({pv,hasLayers}) {
+    const plot= primePlot(pv);
+    if (!plot) return;
+    const att= plot?.attributes;
+    const reselect= Boolean(
+        (att[PlotAttribute.USER_SEARCH_RADIUS_DEG] && att[PlotAttribute.USER_SEARCH_WP])
+        || (att[PlotAttribute.USE_POLYGON] && att[PlotAttribute.POLYGON_ARY])
+    );
+    return (
+        <Stack spacing={1} sx={{mt:.5}}>
+            {hasLayers && <Divider orientation='horizontal' />}
+            <Stack direction='row' justifyContent='center'>
+                <DropDownToolbarButton {...{
+                    text: reselect ? 'Change Choosen Area' : 'Choose Area',
+                    tip: 'select an area',
+                    buttonSize: 'sm',
+                    disableHiding: true,
+                    dropDownKey: 'select-area-from-legend',
+                    color: 'neutral',
+                    variant:'soft',
+                    useDropDownIndicator: true,
+                    sx: { height: 22, },
+                    direction: 'left',
+                    dropDown: <SelectAreaDropDownView {...{plotView:pv, modalEndInfo:undefined}} />
+                }} />
+            </Stack>
+        </Stack>
+    );
+}
+
+function getShortTitle(plotId,dl) {
+    const shortTitle= dl.shortTitle;
+    if (shortTitle) return shortTitle;
+    const title= getLayerTitle(plotId,dl);
+    if (isString(title) && title.startsWith('MOC - ')) return title.substr(6);
+    return title;
+}
\ No newline at end of file
diff --git a/src/firefly/js/visualize/ui/TargetHiPSPanel.jsx b/src/firefly/js/visualize/ui/TargetHiPSPanel.jsx
index 64359d160b..7704b4ffcc 100644
--- a/src/firefly/js/visualize/ui/TargetHiPSPanel.jsx
+++ b/src/firefly/js/visualize/ui/TargetHiPSPanel.jsx
@@ -45,6 +45,7 @@ import {createHiPSMocLayerFromPreloadedTable} from '../task/PlotHipsTask.js';
 import {WebPlotRequest} from '../WebPlotRequest.js';
 import {CONE_CHOICE_KEY, POLY_CHOICE_KEY} from './CommonUIKeys.js';
 import {MultiImageViewer} from './MultiImageViewer.jsx';
+import {SmallLegend} from './SmallLegend';
 import {HelpLines, targetHipsDefaultMenuItemKey, TargetHipsPanelToolbar} from './TargetHipsPanelToolbar.jsx';
 import {closeToolbarModalLayers} from './ToolbarToolModalEnd.js';
 import {
@@ -153,7 +154,7 @@ export const HiPSTargetView = ({sx, hipsDisplayKey='none',
     useEffect(() => {
         setMocError();
         void updateMoc(mocList,plotId,setMocError);
-    }, [mocList]);
+    }, [mocList, plotId]);
 
     useEffect(() => { // if plot view changes then update the target or polygon field
         const setWhichOverlayWrapper= setWhichOverlay ?
@@ -165,7 +166,7 @@ export const HiPSTargetView = ({sx, hipsDisplayKey='none',
             setHiPSRadius,getHiPSRadius,setPolygon,getPolygon,minSize,maxSize,
             canUpdateModalEndInfo:false
         });
-    },[pv]);
+    },[pv]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => { // if target or radius field change then hips plot to reflect it
         const whichOverlay= getWhichOverlay();
@@ -183,7 +184,7 @@ export const HiPSTargetView = ({sx, hipsDisplayKey='none',
 
     useEffect(() => {
         attachSRegion(sRegion,plotId);
-    }, [sRegion]);
+    }, [plotId, sRegion]);
 
     return (
         <Stack {...{minHeight:200, ...sx,}}>
@@ -198,7 +199,8 @@ export const HiPSTargetView = ({sx, hipsDisplayKey='none',
                               whichOverlay={getWhichOverlay()}
                               toolbarHelpId={toolbarHelpId}
                               handleToolbar={false}
-                              menuItemKeys={{...targetHipsDefaultMenuItemKey, selectArea:usingRadius}}
+                              menuItemKeys={{...targetHipsDefaultMenuItemKey, selectArea:false, legendSelectArea:usingRadius}}
+                              Legend={SmallLegend}
                               Toolbar={TargetHipsPanelToolbar}/>
         </Stack>
     );
@@ -312,7 +314,7 @@ function HiPSPanelPopupButton({groupKey:gk, polygonKey, whichOverlay=CONE_CHOICE
                 connectContext?.setControlConnected(false);
             }
         };
-    },[]);
+    },[]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <ToolbarButton {...{
@@ -444,7 +446,7 @@ function loadMocWithAbort(mocList, plotId,setMocError) {
 
         try {
             for(let i=0; (i<mocAddList.length); i++) {
-                const {mocUrl,title,mocColor,maxFetchDepth}= mocAddList[i];
+                const {mocUrl,title,mocColor,maxFetchDepth,shortTitle}= mocAddList[i];
 
                 const tbl_id= 'MOC---'+mocUrl;
                 let add= true;
@@ -477,6 +479,7 @@ function loadMocWithAbort(mocList, plotId,setMocError) {
                         visible: true,
                         fitsPath: mocUrl,
                         title,
+                        shortTitle,
                         color: mocColor ?? colors[i % 2],
                         mocUrl,
                         mocGroupDefColorId: `mocForTargetHipsPanelID-${i}-${mocColor??''}`,
diff --git a/src/firefly/js/visualize/ui/TargetHipsPanelToolbar.jsx b/src/firefly/js/visualize/ui/TargetHipsPanelToolbar.jsx
index ff9207b1f3..27d604a845 100644
--- a/src/firefly/js/visualize/ui/TargetHipsPanelToolbar.jsx
+++ b/src/firefly/js/visualize/ui/TargetHipsPanelToolbar.jsx
@@ -1,22 +1,12 @@
 import {Stack, Typography} from '@mui/joy';
-import SELECTED_ZOOM from 'images/icons-2014/ZoomFitToSelectedSpace.png';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {dispatchComponentStateChange, getComponentState} from '../../core/ComponentCntlr.js';
 import HelpIcon from '../../ui/HelpIcon.jsx';
 import {useStoreConnector} from '../../ui/SimpleComponent.jsx';
-import {ToolbarButton} from '../../ui/ToolbarButton';
 import {visRoot} from '../ImagePlotCntlr.js';
 import {getActivePlotView} from '../PlotViewUtil.js';
-import {
-    CenterOnSelection, CheckedButton, CheckedClearButton, CropButton, FilterAddButton, FiltersOffButton, StatsButton
-} from './Buttons';
 import {CONE_CHOICE_KEY} from './CommonUIKeys.js';
-import {
-    clearFilterDrawingLayer, crop, filterDrawingLayer, recenterToSelection, selectDrawingLayer, stats,
-    unselectDrawingLayer,
-    zoomIntoSelection
-} from './CtxToolbarFunctions';
 import {SelectAreaButton} from './SelectAreaDropDownView.jsx';
 import {VisMiniToolbar} from './VisMiniToolbar.jsx';
 
@@ -58,14 +48,12 @@ export const HelpLines= ({whichOverlay, selectionHelpText, usingRadius}) => {
             <Stack {...{direction:'row', alignItems:'center', pl:.5 }}>
                 {whichOverlay===CONE_CHOICE_KEY ?
                     (<>
-                        <Typography level='body-xs' sx={nowrap}>Click to choose a search center, or use the Selection Tools (</Typography>
-                        {selectButton}
-                        <Typography level='body-xs' sx={nowrap}>) to choose a search center and radius.</Typography>
+                        <Typography level='body-xs' sx={nowrap}>Click to choose a search center, or use the Selection Tools
+                         to choose a search center and radius.</Typography>
                     </> ) :
                     (<>
-                        <Typography level='body-xs' sx={nowrap}>Use the Selection Tools (</Typography>
-                        {selectButton}
-                        <Typography level='body-xs' sx={nowrap}>) to choose a search polygon. Click to change the center.
+                        <Typography level='body-xs' sx={nowrap}>Use the Selection Tools
+                         to choose a search polygon. Click to change the center.
                         </Typography>
                     </> )}
             </Stack>