add colour options for detector and camera tube

package.json

@@ -25,11 +25,13 @@
     "lock": "^1.1.0",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "three": "^0.158.0",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
+    "@types/react-color": "^3.0.10",
     "@types/react-dom": "^18.2.15",
     "@types/three": "^0.155.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",

src/plot/centrePlot.tsx

@@ -36,6 +36,8 @@ import {
   nanometres2Angstroms,
 } from "../utils/units";
 import { convertBetweenQAndD, convertBetweenQAndS } from "../results/scatteringQuantities";
+import { color2String } from "./plotUtils";
+
 
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
@@ -214,8 +216,8 @@ export default function CentrePlot(): JSX.Element {
   }
   return (
     <Box>
-      <Stack direction="column" spacing={2}>
-        <Stack direction="row" spacing={2}>
+      <Stack direction="column" spacing={1}>
+        <Stack direction="row" spacing={1}>
           <Card>
             <CardContent>
               <div
@@ -291,7 +293,7 @@ export default function CentrePlot(): JSX.Element {
                         {plotConfig.cameraTube && (
                           <SvgCircle
                             coords={[cameraTubeCentre, cameraTubePerimeter]}
-                            fill="rgba(0, 0, 255, 0.2)"
+                            fill={color2String(plotConfig.cameraTubeColor)}
                             id="camera tube"
                           />
                         )}
@@ -333,7 +335,7 @@ export default function CentrePlot(): JSX.Element {
                         {plotConfig.detector && (
                           <SvgRect
                             coords={[detectorLower, detectorUpper]}
-                            fill="rgba(255, 0, 0, 0.2)"
+                            fill={color2String(plotConfig.detectorColour)}
                             id="detector"
                             stroke="black"
                             strokePosition="outside"

src/plot/legendBar.tsx

@@ -2,7 +2,6 @@ import {
   Card,
   CardContent,
   Checkbox,
-  Divider,
   FormControl,
   FormControlLabel,
   FormGroup,
@@ -13,16 +12,27 @@ import {
   Typography,
 } from "@mui/material";
 import { PlotAxes, usePlotStore } from "./plotStore";
+import ColourPickerPopover from "../utils/colourPicker";
+import { ColorResult } from "react-color";
+
 
 export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
 
+
+  const handleDetectorColourChange = (color: ColorResult) => {
+    plotConfig.update({ detectorColour: color.rgb })
+  }
+
+  const handleCameraTubeColourChange = (color: ColorResult) => {
+    plotConfig.update({ cameraTubeColor: color.rgb })
+  }
+
   return (
     <Card sx={{ height: 1, width: 1 }}>
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6"> Legend</Typography>
-          <Typography>Add something to do with colors here</Typography>
           <FormGroup>
             <FormControlLabel
               control={
@@ -33,30 +43,39 @@ export default function LegendBar(): JSX.Element {
                   }
                 />
               }
-              label="Detector"
+              label={
+                <Stack direction={"row"}>
+                  <ColourPickerPopover color={plotConfig.detectorColour} onChangeComplete={handleDetectorColourChange} />
+                  <Typography>Detector:</Typography>
+                </Stack>}
             />
             <FormControlLabel
               control={
                 <Checkbox
-                  checked={plotConfig.beamstop}
-                  onChange={(_, checked) => {
-                    plotConfig.update({ beamstop: checked });
-                    plotConfig.update({ qrange: checked });
-                  }}
+                  checked={plotConfig.cameraTube}
+                  onChange={(_, checked) =>
+                    plotConfig.update({ cameraTube: checked })
+                  }
                 />
               }
-              label="Beamstop"
+              label={
+                <Stack direction={"row"}>
+                  <ColourPickerPopover color={plotConfig.cameraTubeColor} onChangeComplete={handleCameraTubeColourChange} />
+                  <Typography>Camera Tube:</Typography>
+                </Stack>}
             />
             <FormControlLabel
               control={
                 <Checkbox
-                  checked={plotConfig.cameraTube}
-                  onChange={(_, checked) =>
-                    plotConfig.update({ cameraTube: checked })
-                  }
+                  checked={plotConfig.beamstop}
+                  onChange={(_, checked) => {
+                    plotConfig.update({ beamstop: checked });
+                    plotConfig.update({ qrange: checked });
+                  }}
                 />
               }
-              label="Camera tube"
+              label="Beamstop"
+
             />
             <FormControlLabel
               control={
@@ -92,9 +111,6 @@ export default function LegendBar(): JSX.Element {
               label="Calibrant"
             />
           </FormGroup>
-          <Divider />
-          <Typography>Current calibrant: {5}</Typography>
-          <Divider />
           <FormControl>
             <FormLabel id="demo-radio-buttons-group-label">Axes:</FormLabel>
             <RadioGroup

src/plot/plotStore.ts

@@ -1,3 +1,4 @@
+import { RGBColor } from "react-color";
 import { create } from "zustand";
 
 export enum PlotAxes {
@@ -8,8 +9,10 @@ export enum PlotAxes {
 
 export interface PlotConfig {
   detector: boolean;
+  detectorColour: RGBColor;
   beamstop: boolean;
   cameraTube: boolean;
+  cameraTubeColor: RGBColor;
   clearnace: boolean;
   qrange: boolean;
   mask: boolean;
@@ -21,8 +24,10 @@ export interface PlotConfig {
 
 export const usePlotStore = create<PlotConfig>((set) => ({
   detector: true,
+  detectorColour: { r: 1, g: 2, b: 1, a: 0.2 },
   beamstop: true,
   cameraTube: true,
+  cameraTubeColor: { r: 1, g: 2, b: 1, a: 0.2 },
   clearnace: true,
   qrange: true,
   mask: false,

src/plot/plotUtils.ts

@@ -1,5 +1,6 @@
 import { CircularDevice, Detector } from "../utils/types";
 import NumericRange from "../calculations/numericRange";
+import { RGBColor } from "react-color";
 
 const offset = 100;
 
@@ -18,3 +19,7 @@ export const getDomains = (
     yAxis: new NumericRange(-offset, Math.round(maxLength + offset)),
   };
 };
+
+export const color2String = (color: RGBColor) => {
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+};

src/presets/presetManager.ts

@@ -16,4 +16,3 @@ export interface AppDataFormat extends BeamlineConfig {
 export const detectorList = detectorData as Record<string, Detector>;
 export const presetList = presetData as Record<string, AppDataFormat>;
 export const defaultConfig = presetList[Object.keys(presetList)[0]];
-

src/utils/colourPicker.tsx

@@ -0,0 +1,34 @@
+import Popover from '@mui/material/Popover';
+import React from 'react';
+import { ColorResult, RGBColor, SketchPicker } from 'react-color';
+import { IconButton } from '@mui/material';
+import { color2String } from '../plot/plotUtils';
+import SquareIcon from '@mui/icons-material/Square';
+
+export default function ColourPickerPopover(props: { color: RGBColor, onChangeComplete: (color: ColorResult) => void }) {
+    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+
+    return (
+        <div>
+            <IconButton style={{ color: color2String(props.color) }} onClick={handleClick}><SquareIcon></SquareIcon></IconButton>
+            <Popover
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+                <SketchPicker color={props.color} onChangeComplete={props.onChangeComplete} />
+            </Popover>
+        </div >
+    );
+}