New components, unit tests, config provider

[SeijDeLeon]

This PR includes various updates to Finch with new controller components from recent beamtime, and some quality of life upgrades to the configuration setup.

New Components

BeamEnergy*
Experiment*
Hexapod*
Histogram*
IFrame
SelectDropdown
SignalMonitorPlotDevice
SignalMonitorPlotOphyd
SignalMonitorPlotPV
*Contains various sub components , hooks, types

Styling consistency

For controller components, they have been modified to have a consistent style with ilght grey backgrounds, and consistent icons at the corners. Moving forward this will be used to enforce styling for control based components.

Consistent component arguments

Components can now take a uniform 'className' prop which is passed into a ShadCN utility function for merging classes, this allows greater customization of components from a developer.

Finch Config Provider

With various backends needed for Finch components, a convienent method of defining the backend urls and api keys in one place is needed. Individual components always take optional 'wsUrl' or 'apiKey' args which will override defaults, but most users will want to set them once and forget it. The Finch Provider is configured at the top level and wrapped around the app, making available the urls and api keys which can be loaded via env variables or JSON files at runtime. If the Finch Provider is not created, then default static urls will be utilized. The Finch Provider is completely optional.

Example usage:

<FinchConfigProvider
      config={{
        tiledApiUrl: import.meta.env.VITE_TILED_API_URL,
        tiledApiKey: import.meta.env.VITE_TILED_API_KEY,
        ophydApiUrl: import.meta.env.VITE_OPHYD_API_URL,
        qServerApiUrl: import.meta.env.VITE_QSERVER_API_URL,
        qServerApiKey: import.meta.env.VITE_QSERVER_API_KEY,
        finchApiUrl: import.meta.env.VITE_FINCH_API_URL,
      }}
    >
      <QueryClientProvider client={queryClient}>
        <HubAppLayout 
          routes={routes} 
          headerTitle='Finch Dev Mode' 
          headerLogoIcon={<div className="h-12 aspect-square text-sky-950">{finchIcons.finchPortraitFrameless}</div>} 
        />
      </QueryClientProvider>
    </FinchConfigProvider>

API folder

Anything related to api calls has been removed from inside of components and put into the api folder. Finch is now using various backends, and future development will rely on having easy access to the hooks and functions which make the backend calls. The intent is that future components should never contain abitrary API calls, and instead should use existing functions or queries from the api folder. Using the query providers can enable taking advantage of caching via tanstack router.

Unit Tests

Unit tests with vitest have been added for all components.

[alisonscheng]

nit: could be beneficial to put this in a util file

[alisonscheng]

is the energy_scan_user used by both ExperimentAngleScan and ExperimentEnergyScan?

[alisonscheng]

you could potentially set the initial value here as localStorage.getItem("energy_scan_user") ?? "" so you don't have to have that initial useEffect. I would test it out though

[alisonscheng]

If e.target.value is an empty value, this will default to zero, which is why it spontaneously spawns a zero sometimes. It might also be good to add some number validation here as well

[alisonscheng]

this might not be a big deal if the default_mono_offset_deg is used most of the time, but if the input mono_offset_deg is the same number as mono_deg_input this function will return Infinity

[alisonscheng]

nit: these props don't match the useBeamEnergyOphydProps