Convert transfer function editor to function component

[frasercl]

Review time: medium-large (45-60min). Advances #80.

The remaining work on implementing @lynwilhelm's designs for an updated channel settings interface (available here) involves adding new visual elements and functionality to the transfer function editor. This component is currently implemented as a React class component, though I believe it has been adapted from an older framework at least once, and draws its plot imperatively with D3 outside of React's normal render/commit cycle. Owing to the many lives this component has lived, it now contains a fair bit of unused or contradictory code and tangled imperative updates that are difficult to follow or reason about. Facing the possibility of adding to this tangle, and encouraged by D3's own example of how the library can integrate more naturally with React's declarative style, I decided it would be worth the time to adapt the component to this style first.

The new component contains about half the code of the old and should be a near-match visually and functionally, though I am aware of at least a few changes:

• Control points no longer animate in on component mount (and in a few other circumstances where new points might appear)
• Control points are no longer clipped off when very near the top of the plot
• The mouse cursor no longer flashes between "move" and the regular pointer while dragging a control point
• I switched from using mouse events to pointer events to handle editing control points. This seems to have made interacting with control points much more performant, though it has also introduced a bug in Firefox where clicking on the plot, dragging off the plot, and releasing over a transfer function preset button is interpreted as a click on that button, causing changes to be overwritten by a generated transfer function. I have no idea why this happens.

Steps to test:

• npm i to update D3
• npm start and open an image to test with. I recommend http://localhost:9020/viewer?url=https%3A%2F%2Fdev-aics-dtp-001.int.allencell.org%2F%2Fassay-dev%2Fcomputational%2Fdata%2Frelease%2Fnuc-morph-data%2Fdata_for_analysis%2Fbaseline_colonies%2F20200323_09_small%2Fraw.ome.zarr
• Open at least one channel's settings menu by clicking the icon of 3 sliders to the right of the channel's name
• Verify that everything still works, especially mouse interactions with the plot, which include:
  • Clicking on an existing control point and dragging it around
  • Clicking not on a control point to create a new one (and dragging it around)
  • Right-clicking on a control point to pick its color

[ShrimpCryptid]

FYI I'm getting some text selection behavior when I click and drag on a point in Chrome. If text is selected, dragging the control point again causes the 🚫 mouse icon to appear.

[frasercl]

FYI I'm getting some text selection behavior when I click and drag on a point in Chrome. If text is selected, dragging the control point again causes the 🚫 mouse icon to appear.

I saw this as well and tried to resolve it with various combos of stopPropagations, preventDefaults, and handlers for new events (onMouseDown, onClick, etc.) which just contained stopPropagations and preventDefaults. With the current combo I'm unable to replicate the highlighting issue on Chrome, so if you're on the most up-to-date version of this branch and still seeing the issue I may want to investigate it further on your machine.

[frasercl]

Following up on the above: turns out I was using a slightly older version of Chrome (122 I believe). Upgrading to Chrome 126 introduced the text highlighting issue for me as well. The CSS changes added in my most recent commit address the issue.