Skip to content

Firefly-1924: Add Legend support #1920

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
robyww wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Firefly-1924: Add Legend support #1920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/firefly/js/drawingLayers/Catalog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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),
Expand Down
7 changes: 4 additions & 3 deletions src/firefly/js/drawingLayers/HiPSMOC.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {

Expand All @@ -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;
Expand All @@ -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;

Expand Down
3 changes: 2 additions & 1 deletion src/firefly/js/drawingLayers/hpx/HpxCatalog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -83,6 +83,7 @@ function creator(initPayload, presetDefaults={}) {
hasPerPlotData: true,
isPointData:true,
supportSubgroups: Boolean(table.tableMeta && table.tableMeta[SUBGROUP]),
shortTitle,
layersPanelLayoutId,
};

Expand Down
6 changes: 6 additions & 0 deletions src/firefly/js/ui/QuantityInputField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 };
Expand Down
151 changes: 76 additions & 75 deletions src/firefly/js/ui/ToolbarButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,99 +56,99 @@ 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,
endDecorator: dropDownIndicator,
'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,
Expand Down Expand Up @@ -196,6 +196,7 @@ ToolbarButton.propTypes= {
disableHiding: bool,
shortcutKey: string,
color: string,
buttonSize: string,
iconButtonSize : string,
ref: oneOfType([element,func]),
slotProps: shape({
Expand Down Expand Up @@ -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,
};
}
Expand Down
7 changes: 4 additions & 3 deletions src/firefly/js/visualize/HiPSMocUtil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -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;
}
Expand Down
2 changes: 2 additions & 0 deletions src/firefly/js/visualize/draw/DrawLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/firefly/js/visualize/iv/ImageViewer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) );
Expand Down Expand Up @@ -97,6 +97,7 @@ export const ImageViewer= memo( ({showWhenExpanded=false, plotId, makeToolbar})
return (
<ImageViewerView {...{plotView,
makeToolbar,
makeLegend,
visRoot:vr,
drawLayersAry: deferredDrawLayersAry,
mousePlotId: deferredMousePlotId,
Expand All @@ -108,6 +109,8 @@ ImageViewer.displayName= 'ImageViewer';
ImageViewer.propTypes= {
plotId : PropTypes.string.isRequired,
showWhenExpanded : PropTypes.bool,
makeToolbar : PropTypes.func,
makeLegend : PropTypes.func,
};


Expand Down
Loading