Add beamline stats fields and start tidying up

[noemifrisina]

Closes #8
Closes #23

• Remove old sleep button
• Merge blueapi status into beamline stats
• Add usually monitored fields to beamline stats tab
• Add Detector state monitors on detector tab

This also starts tidying up the coustom PV components and types - for now just to be able to reuse them. Work on this will be continued in a separate PR (issue incoming)

[rtuck99]

while reviewing this I noticed that a recent change to blueapi has broken the dev configuration, so I raised DiamondLightSource/mx-bluesky#1168

This fix seems to have worked for me:

api:
  url: http://localhost:25565
  cors:
    allow_credentials: True
    origins: 
      - "*"
stomp:
  enabled: true
  url: http://i24-control.diamond.ac.uk:61613

[rtuck99]

This layout looks quite strange, the left and right columns appear staggered. Perhaps adding a third empty box to the right hand will make them line up? Not too keen on having both columns centred either, but 🤷

[noemifrisina]

I staggered the columns on purpose actually - don't really like it but it made things more readable across different screen sizes than when they lined up (still figuring out css details so... workaround)
Making them line up is fairly straightforward - can try again, but need to figure out the resizing in css

[noemifrisina]

while reviewing this I noticed that a recent change to blueapi has broken the dev configuration, so I raised DiamondLightSource/mx-bluesky#1168

This fix seems to have worked for me:

api:
  url: http://localhost:25565
  cors:
    allow_credentials: True
    origins: 
      - "*"
stomp:
  enabled: true
  url: http://i24-control.diamond.ac.uk:61613

Ah, yeah, that was known (lots of breaking changes in newer blueapi versions - the one on the beamline is fairly old now) but hadn't got around to writing the ticket yet so thanks! :)

There a PR now: DiamondLightSource/mx-bluesky#1171

[rtuck99]

I think we've had this conversation before about the button highlight colour being almost invisible in both light and dark modes. Is there an issue logged about this in the upstream widget/theming that we use? Either that or perhaps we are somehow using them wrong - I'm not an MUI expert.

Honestly I think it's pretty piss poor usability that the buttons don't provide any real affordance that they are clickable unless you roll over them. They should look like buttons!

If you look at the documentation, for MUI https://mui.com/material-ui/react-button/ and also for the original material design, and how the buttons are used in apps everywhere, text buttons are generally rendered in light blue, either blue-on-white or white-on-blue

There is a reason for this, it's because it tells you that it's a button and you can click it! Also, the button text is in all caps. I'm increasingly annoyed about this and I think it should be fixed.

[noemifrisina]

The buttons in the docs are like that because that's the default theme - which I agree looks much better. Just made a commit making the bunntons "contained" meaning they are more visible (in you words: they look like buttons) - at least in dark mode. I can't seem to get the light mode however to do the same - which may be limited by the known issues in the theme we're using...

[noemifrisina]

Btw, I can also make a custom version of the button - which I think is overkill considering we already have the MUI one but we're limited by the color scheme of the theme - but that's a separate PR

[rtuck99]

I think we should raise a bug against the diamond theme then.

[noemifrisina]

They already have a PR that fixes the theme - apparently the underlying issue was subclassing the theme not working properly - I'm just waiting for it to get merged so we can start using the new one and hopefully that will improve matters. For now the only other thing I can do is make all the buttons contained and default to secondary color (which is yellow) which will make them equally visible in both light and dark mode

edit: just noticed that particular PR got merged, just waiting for release then!

[rtuck99]

I think this page and the detector position page generally needs some additional structure like some cards to group together the information and make it more organised, there's a lot of white space and I prefer the other tabs where everything is a bit more organised.

Also the centring of the columns means that when the information changes, the text jumps around which is distracting.

[noemifrisina]

The aim is to eventually have all the information in this page end up in a permanent drawer (see #46 ) as the scientists usually prefer having this information always visible during a collection for debugging purposes... that might take awhile to achieve as it involves rethinking most of the layout for other pages as well.

For now, cards sound like a good idea - will try that

[rtuck99]

Much nicer. Approved