working requested qrange

package.json

@@ -17,6 +17,7 @@
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.5",
     "@react-three/fiber": "^8.13.7",
+    "d3-scale": "^4.0.2",
     "framer-motion": "^10.15.2",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",

src/calculations/numericRange.ts

@@ -17,7 +17,7 @@ export default class NumericRange {
   }
 
   containsRange(other: NumericRange) {
-    return other.min >= this.min && other.max <= this.min;
+    return other.min >= this.min && other.max <= this.max;
   }
 
   toString(): string {

src/calculations/qspace.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { Vector4, Vector3 } from "three";
+import { Vector2, Vector4, Vector3 } from "three";
 import QSpace, { DetectorProperties } from "./qspace";
 
 test("Test getting q from pixel position ", () => {
@@ -23,7 +23,7 @@ test("Test getting q from pixel position ", () => {
   };
 
   const qspace = new QSpace(detProps, diffCrystEnv, 1);
-  const result = qspace.qFromPixelPosition(1, 1);
+  const result = qspace.qFromPixelPosition(new Vector2(1, 1));
   expect(result).toBeInstanceOf(Vector3);
   // do better testing when you understand it better
 });

src/calculations/qvalue.ts

@@ -1,6 +1,6 @@
 import { Beamstop } from "../utils/types";
 import { Ray } from "./ray";
-import { Vector3 } from "three";
+import { Vector2 } from "three";
 
 export const calculateQValue = (
   distance: number,
@@ -28,7 +28,6 @@ export const calculateDistanceFromQValue = (
     return null;
   }
   const temp = (wavelength * qValue) / (4 * Math.PI);
-
   if (Math.abs(temp) >= Math.sqrt(2) / 2) {
     return null;
   }
@@ -41,13 +40,13 @@ export const getPointForQ = (
   cameralength: number,
   wavelength: number,
   beamstop: Beamstop,
-): Vector3 => {
+): Vector2 => {
   const ray = new Ray(
-    new Vector3(Math.cos(angle), Math.sin(angle)),
-    new Vector3(beamstop.centre.x ?? 0, beamstop.centre.y ?? 0),
+    new Vector2(Math.cos(angle), Math.sin(angle)),
+    new Vector2(beamstop.centre.x ?? 0, beamstop.centre.y ?? 0),
   );
   return ray.getPointAtDistance(
     1.0e3 *
-      (calculateDistanceFromQValue(qValue, cameralength, wavelength) ?? 0),
+    (calculateDistanceFromQValue(qValue, cameralength, wavelength) ?? 0),
   );
 };

src/data-entry/beamProperties.tsx

@@ -24,9 +24,9 @@ import { MathUtils } from "three/src/Three.js";
 export default function BeampropertiesDataEntry() {
   const minWavelength = useBeamlineConfigStore((state) => {
     if (state.wavelengthUnits === WavelengthUnits.angstroms) {
-      return nanometres2Angstroms(state.maxWavelength);
+      return nanometres2Angstroms(state.minWavelength);
     }
-    return state.maxWavelength;
+    return state.minWavelength;
   });
 
   const maxWavelength = useBeamlineConfigStore((state) => {

src/plot/centrePlot.tsx

@@ -9,6 +9,7 @@ import {
   SvgRect,
   SvgLine,
 } from "@h5web/lib";
+// Need to find those damn types
 import { Vector2, Vector3 } from "three";
 import { useBeamstopStore } from "../data-entry/beamstopStore";
 import { useDetectorStore } from "../data-entry/detectorStore";
@@ -21,6 +22,8 @@ import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
 import LegendBar from "./legendBar";
 import ResultsBar from "../results/resultsBar";
 import NumericRange from "../calculations/numericRange";
+import { useResultStore } from "../results/resultsStore";
+import { getPointForQ } from "../calculations/qvalue";
 
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
@@ -44,8 +47,7 @@ export default function CentrePlot(): JSX.Element {
     bealineConfig,
   );
 
-  const { ptMin, ptMax, visibleQRange } = qrangeResult;
-
+  const { ptMin, ptMax, visibleQRange, fullQRange } = qrangeResult;
   const adjustUnitsDetector = (detector: Detector): Detector => {
     if (plotConfig.plotAxes === PlotAxes.milimeter) {
       return {
@@ -125,6 +127,24 @@ export default function CentrePlot(): JSX.Element {
 
   const domains = getDomains(ajustedDetector, ajustedCameraTube);
 
+  // requested range on diagram
+  const resultStore = useResultStore();
+  const requestedMax = getPointForQ(
+    resultStore.requestedRange.max * 1e9,
+    bealineConfig.angle ?? 0,
+    (bealineConfig.cameraLength ?? 0),
+    (bealineConfig.wavelength ?? 0) * 1e-9,
+    ajustedBeamstop,
+  );
+  const requestedMin = getPointForQ(
+    resultStore.requestedRange.min * 1e9,
+    bealineConfig.angle ?? 0,
+    (bealineConfig.cameraLength ?? 0),
+    (bealineConfig.wavelength ?? 0) * 1e-9,
+    ajustedBeamstop,
+  );
+
+
   return (
     <Box>
       <Stack direction="column" spacing={2}>
@@ -157,14 +177,14 @@ export default function CentrePlot(): JSX.Element {
                       ),
                       new Vector3(
                         (ajustedBeamstop.centre.x ?? 0) +
-                          ajustedBeamstop.diameter / 2,
+                        ajustedBeamstop.diameter / 2,
                         ajustedBeamstop.centre.y ?? 0,
                       ),
                       new Vector3(
                         ajustedBeamstop.centre.x ?? 0,
                         (ajustedBeamstop.centre.y ?? 0) +
-                          ajustedBeamstop.diameter / 2 +
-                          (ajustedBeamstop.clearance ?? 0),
+                        ajustedBeamstop.diameter / 2 +
+                        (ajustedBeamstop.clearance ?? 0),
                       ),
                       new Vector3(
                         ajustedCameraTube.centre.x ?? 0,
@@ -173,7 +193,7 @@ export default function CentrePlot(): JSX.Element {
                       new Vector3(
                         ajustedCameraTube.centre.x ?? 0,
                         (ajustedCameraTube.centre.y ?? 0) +
-                          ajustedCameraTube.diameter / 2,
+                        ajustedCameraTube.diameter / 2,
                       ),
                       new Vector3(0, 0),
                       new Vector3(
@@ -182,6 +202,8 @@ export default function CentrePlot(): JSX.Element {
                       ),
                       new Vector3(ajustedPoints.ptMin.x, ajustedPoints.ptMin.y),
                       new Vector3(ajustedPoints.ptMax.x, ajustedPoints.ptMax.y),
+                      requestedMin,
+                      requestedMax,
                     ]}
                   >
                     {(
@@ -194,6 +216,8 @@ export default function CentrePlot(): JSX.Element {
                       detectorUpper: Vector3,
                       minQRange: Vector3,
                       maxQRange: Vector3,
+                      requestedMin: Vector2,
+                      requestedMax: Vector2,
                     ) => (
                       <SvgElement>
                         {plotConfig.cameraTube && (
@@ -210,6 +234,13 @@ export default function CentrePlot(): JSX.Element {
                             strokeWidth={2}
                           />
                         )}
+                        {resultStore.requestedRange.min && (
+                          <SvgLine
+                            coords={[requestedMin, requestedMax]}
+                            stroke="green"
+                            strokeWidth={2}
+                          />
+                        )}
                         {plotConfig.qrange && plotConfig.beamstop && (
                           <SvgLine
                             coords={[beamstopCentre, minQRange]}
@@ -252,7 +283,10 @@ export default function CentrePlot(): JSX.Element {
             <LegendBar />
           </Box>
         </Stack>
-        <ResultsBar visableQRange={visibleQRange ?? new NumericRange(0, 1)} />
+        <ResultsBar
+          visableQRange={visibleQRange ?? new NumericRange(0, 1)}
+          fullQrange={fullQRange ?? new NumericRange(0, 1)}
+        />
       </Stack>
     </Box>
   );

src/presets/presetConfigs.json

@@ -17,6 +17,7 @@
       "diameter": 1
     },
     "angle": 1,
+    "wavelength": null,
     "cameraLength": 1,
     "minWavelength": 1,
     "maxWavelength": 3,
@@ -41,11 +42,12 @@
       "diameter": 310
     },
     "angle": 1.57,
-    "cameraLength": 1,
-    "minWavelength": 1,
-    "maxWavelength": 1,
+    "wavelength": 0.09,
+    "cameraLength": 1.9,
+    "minWavelength": 0.062,
+    "maxWavelength": 0.335,
     "minCameraLength": 1.9,
-    "maxCameraLength": 100
+    "maxCameraLength": 9.9
   },
   "I22 SAXS Anisotropic": {
     "detector": "Pilatus P3-2M",
@@ -65,9 +67,10 @@
       "diameter": 310
     },
     "angle": 1.57,
-    "cameraLength": 1,
+    "wavelength": 0.09,
+    "cameraLength": 1.9,
     "minWavelength": 1,
-    "maxWavelength": 1,
+    "maxWavelength": 10,
     "minCameraLength": 1.9,
     "maxCameraLength": 100
   }

src/results/rangeDiagram.tsx

@@ -0,0 +1,62 @@
+import NumericRange from "../calculations/numericRange";
+import { useResultStore } from "./resultsStore";
+
+// in here to put the range diagram
+export default function RangeDiagram(props: {
+  visibleQRange: NumericRange;
+  fullQRange: NumericRange;
+}): JSX.Element {
+  const svgRange = props.fullQRange.max - props.fullQRange.min;
+  const visableStart = (props.visibleQRange.min / svgRange) * 100;
+  const visbleWidth =
+    ((props.visibleQRange.max - props.visibleQRange.min) / svgRange) * 100;
+  const resultStore = useResultStore();
+
+  const requestedMax = (resultStore.requestedRange.max / svgRange) * 100;
+  const requestedMin = (resultStore.requestedRange.min / svgRange) * 100;
+  const rectColour = props.visibleQRange.containsRange(
+    resultStore.requestedRange,
+  )
+    ? "green"
+    : "red";
+
+  return (
+    <svg
+      style={{
+        display: "grid",
+        height: "100",
+        width: "100",
+        border: "solid black",
+      }}
+    >
+      <rect
+        y="0"
+        x={`${visableStart}%`}
+        width={`${visbleWidth}%`}
+        height="50%"
+        fill={rectColour}
+      ></rect>
+      <line
+        x1={`${requestedMin}%`}
+        y1={0}
+        x2={`${requestedMin}%`}
+        y2="50%"
+        style={{ stroke: "black", strokeWidth: 2 }}
+      />
+      <line
+        x1={`${requestedMax}%`}
+        y1={0}
+        x2={`${requestedMax}%`}
+        y2="60%"
+        style={{ stroke: "black", strokeWidth: 2 }}
+      />
+      <text y="60%" x={`${requestedMin}%`}>
+        {" "}
+        Requested min
+      </text>
+      <text y="80%" x={`${requestedMax}%`}>
+        Requested max
+      </text>
+    </svg>
+  );
+}

src/results/resultsBar.tsx

@@ -14,11 +14,13 @@ import {
 } from "@mui/material";
 import { AngleUnits } from "../utils/units";
 import React from "react";
-import { ScatteringQuantity } from "./resultsStore";
+import { ScatteringQuantity, useResultStore } from "./resultsStore";
 import NumericRange from "../calculations/numericRange";
+import RangeDiagram from "./rangeDiagram";
 
 export default function ResultsBar(props: {
   visableQRange: NumericRange;
+  fullQrange: NumericRange;
 }): JSX.Element {
   const [angleUnits, setAngleUnits] = React.useState<AngleUnits>(
     AngleUnits.radians,
@@ -35,6 +37,7 @@ export default function ResultsBar(props: {
     setQuantity(event.target.value as ScatteringQuantity);
   };
 
+  const resultStore = useResultStore();
   return (
     <Box sx={{ flexGrow: 2 }}>
       <Card sx={{ height: 1 }}>
@@ -92,10 +95,38 @@ export default function ResultsBar(props: {
                 <Typography>Requested max {quantity} value: </Typography>
               </Stack>
               <Stack spacing={2}>
-                <TextField type="number" size="small" />
-                <TextField type="number" size="small" />
+                <TextField
+                  type="number"
+                  size="small"
+                  value={resultStore.requestedRange.min}
+                  onChange={(event) => {
+                    resultStore.update({
+                      requestedRange: new NumericRange(
+                        parseFloat(event.target.value) ?? 0,
+                        resultStore.requestedRange.max,
+                      ),
+                    });
+                  }}
+                />
+                <TextField
+                  type="number"
+                  size="small"
+                  value={resultStore.requestedRange.max}
+                  onChange={(event) => {
+                    resultStore.update({
+                      requestedRange: new NumericRange(
+                        resultStore.requestedRange.min,
+                        parseFloat(event.target.value) ?? 0,
+                      ),
+                    });
+                  }}
+                />
               </Stack>
             </Stack>
+            <RangeDiagram
+              visibleQRange={props.visableQRange}
+              fullQRange={props.fullQrange}
+            />
           </Stack>
         </CardContent>
       </Card>

src/results/resultsStore.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import NumericRange from "../calculations/numericRange";
 
 const theta = "\u03B8";
 
@@ -11,15 +12,13 @@ export enum ScatteringQuantity {
 
 export interface ResultStore {
   selected: ScatteringQuantity;
-  requestedMinQ: number;
-  requestedMaxQ: number;
+  requestedRange: NumericRange;
   update: (results: Partial<ResultStore>) => void;
 }
 
 export const useResultStore = create<ResultStore>((set) => ({
   selected: ScatteringQuantity.q,
-  requestedMinQ: 1,
-  requestedMaxQ: 0,
+  requestedRange: new NumericRange(0, 1),
   update: (results: Partial<ResultStore>) => {
     set({ ...results });
   },