Firefly-1924: Add Legend support

[robyww]

Firefly-1924: Add Legend Support

• added a legend on hips and images
• new xs size for button
• added selection in embedded components
• added shortTitle for MOCs
• some refactor and clean up
• Renamed a couple of files to better reflect their function

ife PR: https://github.com/IPAC-SW/irsa-ife/pull/459

Testing

• You should see the legend
• IrsaViewer: https://firefly-1924-legend.irsakubedev.ipac.caltech.edu/irsaviewer
  • search results
• DCE: https://firefly-1924-legend.irsakubedev.ipac.caltech.edu/irsaviewer/dce
  • in the search
• SPHEREx: https://firefly-1924-legend.irsakubedev.ipac.caltech.edu/applications/spherex
  • in the search
• Euclid: https://firefly-1924-legend.irsakubedev.ipac.caltech.edu/applications/euclid
  • in the search

[lrebull]

Nice!
DCE doesn't have the "details" button thingey in the legend - deliberate or accidental?
IRSA Viewer in general does have it, but the DCE tab within IV is also missing it.
The last iteration would tell you in the legend if the MOC was loading, and that was a really nice feature. It doesn't seem to be there anymore.

[robyww]

DCE doesn't have the "details" button thingey in the legend - deliberate or accidental?

I am not showing the details button when the MOC is used for a search interface, like dce, spherex, or euclid. For coverage views I enable it.

[robyww]

The last iteration would tell you in the legend if the MOC was loading, and that was a really nice feature. It doesn't seem to be there anymore.

I will look at this

[lrebull]

are these not search interfaces?

[jaladh-singhal]

I did something very similar but I'm firing the changes in store instead of modifying the stateful prop (viewProps.displayValue in here). Also check with 0 is important otherwise it gets ignored in falsy value check.

Following is what I tested and is working for my PR:

Suggested change

	if (viewProps.value && !viewProps.displayValue) {
	// eslint-disable-next-line react-hooks/immutability
	viewProps.displayValue = convertQuantityUnits(viewProps.value, viewProps.quantityBaseUnit, viewProps.unit);
	}
	useEffect(() => {
	// if value changed in the store (for e.g. by a setFieldValue()) and there's no displayValue, set it
	if ((viewProps?.value || viewProps?.value===0) && viewProps?.unit && !viewProps?.displayValue) {
	const newDisplayValue = convertQuantityUnits(viewProps.value, quantityBaseUnit, viewProps.unit);
	fireValueChange({displayValue: newDisplayValue});
	}
	}, [viewProps?.value, viewProps?.unit, viewProps?.displayValue, fireValueChange, convertQuantityUnits, quantityBaseUnit]);