before i rewrite the results store

DiamondLightSource · Oct 4, 2023 · d0ca7b1 · d0ca7b1
1 parent 744ef48
commit d0ca7b1
Show file tree

Hide file tree

Showing 10 changed files with 264 additions and 189 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": "^0.155.0",
+    "ts-enum-util": "^4.0.2",
     "zustand": "^4.4.1"
   },
   "devDependencies": {

diff --git a/src/calculations/qvalue.test.ts b/src/calculations/qvalue.test.ts
@@ -1,5 +1,5 @@
-import { expect, test } from "vitest";
+import { test } from "vitest";
 
 test("Test getting q from pixel position ", () => {
-  console.log("write some tests here");
+    console.log("write some tests here");
 });
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
@@ -22,7 +22,6 @@ 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 {
@@ -128,16 +127,15 @@ 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,
+    plotConfig.requestedRange.max * 1e9,
     bealineConfig.angle ?? 0,
     bealineConfig.cameraLength ?? 0,
     (bealineConfig.wavelength ?? 0) * 1e-9,
     ajustedBeamstop,
   );
   const requestedMin = getPointForQ(
-    resultStore.requestedRange.min * 1e9,
+    plotConfig.requestedRange.min * 1e9,
     bealineConfig.angle ?? 0,
     bealineConfig.cameraLength ?? 0,
     (bealineConfig.wavelength ?? 0) * 1e-9,
@@ -233,7 +231,7 @@ export default function CentrePlot(): JSX.Element {
                             strokeWidth={2}
                           />
                         )}
-                        {resultStore.requestedRange.min && (
+                        {plotConfig.requestedRange.min && plotConfig.requestedRange.max && (
                           <SvgLine
                             coords={[requestedMin, requestedMax]}
                             stroke="green"

diff --git a/src/plot/plotStore.ts b/src/plot/plotStore.ts
@@ -1,20 +1,16 @@
 import { create } from "zustand";
-import { AngleUnits, DistanceUnits, WavelengthUnits } from "../utils/units";
+import NumericRange from "../calculations/numericRange";
 
 export enum PlotAxes {
   milimeter = "milimeter",
   pixel = "pixel",
   reciprocal = "reciprocal",
 }
-
-export interface ScatteringQuantity {
-  name: string;
-  minValue: number;
-  maxValue: number;
-  RequestedMin: number;
-  RequestedMax: number;
-  units: DistanceUnits | WavelengthUnits | AngleUnits;
-  generate: (qvalue: number) => number;
+export enum ScatteringOptions {
+  q = "q",
+  s = "s",
+  d = "d",
+  twoTheta = `2${'\u03B8'}`
 }
 
 export interface PlotConfig {
@@ -27,6 +23,9 @@ export interface PlotConfig {
   calibrantInPlot: boolean;
   calibrant: string;
   plotAxes: PlotAxes;
+  requestedRange: NumericRange;
+  selected: ScatteringOptions;
+  units: string;
   update: (newConfig: Partial<PlotConfig>) => void;
 }
 
@@ -40,6 +39,9 @@ export const usePlotStore = create<PlotConfig>((set) => ({
   calibrantInPlot: false,
   calibrant: "something",
   plotAxes: PlotAxes.milimeter,
+  requestedRange: new NumericRange(0, 1),
+  selected: ScatteringOptions.q,
+  units: "r-nanometres",
   update: (newConfig) => {
     set({ ...newConfig });
   },

diff --git a/src/results/rangeDiagram.tsx b/src/results/rangeDiagram.tsx
@@ -1,62 +1,60 @@
 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;
+    visibleQRange: NumericRange;
+    fullQRange: NumericRange;
+    requestedRange: 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 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 requestedMax = (resultStore.requestedRange.max / svgRange) * 100;
-  const requestedMin = (resultStore.requestedRange.min / svgRange) * 100;
-  const rectColour = props.visibleQRange.containsRange(
-    resultStore.requestedRange,
-  )
-    ? "green"
-    : "red";
+    const requestedMax = (props.requestedRange.max / svgRange) * 100;
+    const requestedMin = (props.requestedRange.min / svgRange) * 100;
+    const rectColour = props.visibleQRange.containsRange(
+        props.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>
-  );
+    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>
+    );
 }