Firefly-2085: Refactor FootprintToolUI to Use a Functional Component

[aventura121]

Firefly-2085: Refactor FootprintToolUi to Use A Functional Component

Description

This PR refactors the component as specified while also bolstering its implementation over the class component version. We also make the footprint panel shorter per the ticket as shown below.

Testing

• Build: https://firefly-2085-refactor-footprinttoolui.irsakubedev.ipac.caltech.edu/firefly

• Steps

1. Navigate to the Survey Maps (HiPS) view
2. Input a target object, e.g. m81 and load an image search (e.g. 2MASS Color J).
3. Select the Hammer and Wrench icon, then the rightmost Overlay Markers icon in the Layers row.
4. Select a footprint, e.g. JWST NIRCAM.
5. Once the footprint is drawn, it's easier to zoom in to validate.
6. Now, select the Layers Icon in the top menu, this will open the FootprintToolUI panel.
7. Try typing in the angle, changing the label position, or changing the title. All changes should be reflected in the plot.
8. Dragging the plot should update the center coordinates.

Style Change

• For the layout change to make it more vertically shortened, the panel now makes of more use of one of the rows, placing the angle input alongside coordinates.

Before

After

[robyww]

The code looks good. My feedback was mainly for cleanup and readability.

the ticket was too vague but you changed too much in the UI to get the tighter vertical packing. It is alwaus good to ask about stuff like that.

• keep the text the same (Label Location -> Corner), stuff like this should go through @lrebull
• Keep the vertical label orientation the same as before, when it makes sense the vertical looks nicer.
• Putting angle on the first line overlaps in to the color area.
• Overall it should look like it did before but experiment to see if you can get a little tighter spacing. I was only looking for a few pixels. If it does not make sense, that is fine.

[robyww]

It was not there before but for safety.

const {fpText, fpTextLoc, angle Deg, activePlotId} = action.payload.changes ?? {}

[robyww]

we want to move away from get

 !isEmpty(dd.[DataTypes.DATA]?.activePlotId])

[robyww]

this is a cool but very complex line. Maybe you should simplify it to.

const title= {...(textApplied && {title: fpText || drawLayer.defaultTitle})};
return {...updateMarkerText(fpText, fpTextLoc, dd[DataTypes.DATA], plotIdAry), ...title};

I think it would be easier to read.

[robyww]

put this in a function outside of the component, then

... = useStoreConnector(() -> getXXX(drawLayerId,plotId))

It make the component easier to read.

[robyww]

use another line to keep style consistent

const textOnLink = fpInfo?.fromFile 
                     ? `Add another ${fpInfo.fromFile}`
                     : fpInfo?.fromRegionAry
                                    ? `Add another ${drawLayer.title}`
                                    : `Add another ${fpInfo?.footprint}${fpInfo?.instrument ? ' '+fpInfo.instrument : ''}`;

[robyww]

normally we would always want to use spacing:1, however the way this component is layed out it might not be necessary.