diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3328804..b0a57d9 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -26,6 +26,7 @@ module.exports = {
     "no-throw-literal": "off",
     "max-len": ["warn", { code: 80 }],
     "@typescript-eslint/no-throw-literal": "error",
+    "@typescript-eslint/no-misused-promises": ["error", { "checksVoidReturn": { "attributes": false } }],
   },
   settings: {
     react: {
diff --git a/arkit.svg b/arkit.svg
index 7bba51c..9a658c8 100644
--- a/arkit.svg
+++ b/arkit.svg
@@ -1,106 +1,116 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1515px" preserveAspectRatio="none" style="width:972px;height:1515px;" version="1.1" viewBox="0 0 972 1515" width="972px" zoomAndPan="magnify"><defs/><g><ellipse cx="61.4706" cy="373.1774" fill="#F8F8F8" rx="19.9706" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="24" x="49.4706" y="376.6618">app</text><ellipse cx="212.3501" cy="174.27" fill="#F8F8F8" rx="55.3501" ry="13.47" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="78" x="173.3501" y="177.7544">basicAppBar</text><!--MD5=[a6ea44cb3a57a1d10010999a6b55e716]
-entity _beamlineconfigStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="147" x="476" y="304.3"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="127" x="486" y="325.4387">beamlineconfigStore</text><ellipse cx="549.4608" cy="539.1962" fill="#F8F8F8" rx="59.9608" ry="14.3922" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="90" x="504.4608" y="542.6805">BeamlineTable</text><ellipse cx="371.988" cy="243.4976" fill="#F8F8F8" rx="63.988" ry="15.1976" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="100" x="321.988" y="246.982">beamProperties</text><ellipse cx="372.0477" cy="417.1774" fill="#F8F8F8" rx="47.5477" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="63" x="340.5477" y="420.6618">beamstop</text><!--MD5=[b3288f82aea54a3eaf1575100e7d0de8]
-entity _beamstopStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="117" x="491" y="616.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="97" x="501" y="637.4427">beamstopStore</text><ellipse cx="371.9787" cy="110.1957" fill="#F8F8F8" rx="54.9787" ry="13.3957" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="77" x="333.4787" y="113.6801">cameraTube</text><!--MD5=[cb61f5a9fbf6155a70854d96a1a0186b]
-entity _cameraTubeStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="131" x="484" y="178.3"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="111" x="494" y="199.4387">cameraTubeStore</text><ellipse cx="212.2548" cy="923.1814" fill="#F8F8F8" rx="48.2548" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="64" x="180.2548" y="926.6658">centrePlot</text><ellipse cx="549.6095" cy="1396.1261" fill="#F8F8F8" rx="54.6095" ry="13.3219" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="76" x="511.6095" y="1399.6105">colourPicker</text><ellipse cx="212.4787" cy="373.1957" fill="#F8F8F8" rx="54.9787" ry="13.3957" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="77" x="173.9787" y="376.6801">dataSideBar</text><ellipse cx="372.1531" cy="465.4306" fill="#F8F8F8" rx="61.1531" ry="14.6306" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="93" x="325.6531" y="468.915">detectorDialog</text><!--MD5=[2954216a28af559177fd560618bc1dcd]
-entity _detectorStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="108" x="495.5" y="422.3"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="88" x="505.5" y="443.4387">detectorStore</text><ellipse cx="549.6742" cy="490.5388" fill="#F8F8F8" rx="59.1742" ry="14.2348" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="88" x="505.6742" y="494.0232">detectorTable</text><ellipse cx="372.0477" cy="1388.1816" fill="#F8F8F8" rx="47.5477" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="63" x="340.5477" y="1391.666">legendBar</text><ellipse cx="61.5416" cy="327.1774" fill="#F8F8F8" rx="27.0416" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="34" x="44.5416" y="330.6618">main</text><ellipse cx="549.3081" cy="900.1656" fill="#F8F8F8" rx="67.3081" ry="15.8616" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="108" x="495.3081" y="903.65">MessageDiagram</text><!--MD5=[29dac6c96591de790f438864f2e7c125]
-entity _numericRange--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="108" x="853" y="1206.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="88" x="863" y="1227.4427">numericRange</text><!--MD5=[ac8ec82d29538cc90342a8d0c02e821d]
-entity _plotStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="78" x="510.5" y="1328.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="58" x="520.5" y="1349.4427">plotStore</text><!--MD5=[478350613ba6941540b6248a553517e2]
-entity _Plotter--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="62" x="341" y="1279.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="42" x="351" y="1300.4427">Plotter</text><!--MD5=[682890370432bf166a9007ef5c4f77fa]
-entity _plotUtils--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="71" x="702.5" y="1308.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="51" x="712.5" y="1329.4427">plotUtils</text><ellipse cx="372.0993" cy="513.4239" fill="#F8F8F8" rx="56.0993" ry="13.6199" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="80" x="332.0993" y="516.9082">presetDialog</text><!--MD5=[a719fb970a83fe4fc83625b986048aa7]
-entity _presetManager--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="115" x="680.5" y="526.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="95" x="690.5" y="547.4427">presetManager</text><ellipse cx="549.6127" cy="1207.1814" fill="#F8F8F8" rx="34.1127" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="44" x="527.6127" y="1210.6658">qrange</text><!--MD5=[69536b9dc36a4a7375270f59c9e888e0]
-entity _qspace--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="66" x="705" y="1158.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="715" y="1179.4427">qspace</text><ellipse cx="549.4914" cy="1253.1814" fill="#F8F8F8" rx="31.9914" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="41" x="528.9914" y="1256.6658">qvalue</text><ellipse cx="549.6742" cy="1034.5388" fill="#F8F8F8" rx="59.1742" ry="14.2348" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="88" x="505.6742" y="1038.0232">rangeDiagram</text><ellipse cx="549.4423" cy="851.1925" fill="#F8F8F8" rx="52.4423" ry="12.8885" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="70" x="514.4423" y="854.6768">rangeTable</text><!--MD5=[551ef8a1ec5300c6a2cdd5ab44cb90de]
-entity _ray--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="40" x="718" y="1254.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="20" x="728" y="1275.4427">ray</text><ellipse cx="372.0477" cy="923.1814" fill="#F8F8F8" rx="47.5477" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="63" x="340.5477" y="926.6658">resultsBar</text><!--MD5=[7efb2db2f2184c088c9dbbb8036c83c7]
-entity _resultsStore--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="96" x="690" y="706.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="76" x="700" y="727.4427">resultsStore</text><ellipse cx="738.0315" cy="898.2103" fill="#F8F8F8" rx="75.0315" ry="17.4063" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="126" x="675.0315" y="901.6947">scatteringQuantities</text><ellipse cx="372.0122" cy="21.1774" fill="#F8F8F8" rx="44.0122" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="58" x="343.0122" y="24.6618">sideMenu</text><ellipse cx="372.1335" cy="728.1814" fill="#F8F8F8" rx="46.1335" ry="12.8774" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="61" x="341.6335" y="731.6658">svgEllipse</text><!--MD5=[0190f419ef54fc162964943b68b4f170]
-entity _types--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="55" x="879.5" y="574.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="35" x="889.5" y="595.4427">types</text><!--MD5=[37349b9385241d7e086cfee13ce1f69a]
-entity _unitRange--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="82" x="697" y="1020.304"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="62" x="707" y="1041.4427">unitRange</text><!--MD5=[2e43345867f0b2f1f095711d58ea3100]
-entity _units--><rect fill="#F8F8F8" height="33.9688" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="49" x="882.5" y="352.3"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="29" x="892.5" y="373.4387">units</text><ellipse cx="61.5152" cy="281.403" fill="#F8F8F8" rx="53.5152" ry="13.103" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="73" x="25.0152" y="284.8874">vite-env.d</text><ellipse cx="61.3501" cy="234.27" fill="#F8F8F8" rx="55.3501" ry="13.47" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="78" x="22.3501" y="237.7544">vite.config</text><!--MD5=[8d1b8dcf6968eb6c0f6a0eeba4da8d0b]
-link app to basicAppBar--><path d="M80.6468,369 C92.154,365.52 106.749,359.64 117,350.3 C166.368,305.34 194.93,228.46 206.058,193.1 " fill="none" id="app-&gt;basicAppBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="207.574,188.2,201.1019,195.6238,206.1022,192.9785,208.7475,197.9787,207.574,188.2" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[27b8899d8d132aae21cf1d9ed0d6989c]
-link app to centrePlot--><path d="M65.9638,386.09 C85.6511,458.76 183.395,819.56 206.567,905.096 " fill="none" id="app-&gt;centrePlot" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="207.923,910.102,209.4308,900.3692,206.6158,905.2759,201.7091,902.4608,207.923,910.102" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0810c7685c88ac48a48b75abc1428981]
-link app to dataSideBar--><path d="M81.6741,373.3 C99.5799,373.3 127.254,373.3 152.459,373.3 " fill="none" id="app-&gt;dataSideBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="157.463,373.3,148.463,369.3,152.463,373.3,148.463,377.3,157.463,373.3" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[72cf876507df3556cf90c6e4a832abdc]
-link basicAppBar to sideMenu--><path d="M220.594,160.86 C234.387,135.85 267.086,81.78 308,49.3 C316.54,42.53 326.98,37.03 336.885,32.75 " fill="none" id="basicAppBar-&gt;sideMenu" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="341.695,30.75,331.849,30.5119,337.0782,32.6696,334.9204,37.8988,341.695,30.75" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[9dfbbc992608cd1cd50968728d72f2fb]
-link _beamlineconfigStore to _presetManager--><path d="M564.717,338.5 C579.571,356.62 603.397,386.1 623,412.3 C641.54,437.09 643.094,445.61 663,469.304 C679.052,488.414 699.182,508.321 714.393,522.668 " fill="none" id="_beamlineconfigStore-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="718.149,526.192,714.3219,517.1171,714.5024,522.7711,708.8485,522.9516,718.149,526.192" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f023a1ddb850476760c038fde5bccad9]
-link _beamlineconfigStore to _types--><path d="M587.95,338.34 C641.422,363.77 741.12,415.35 813,477.304 C845.421,505.247 875.245,545.454 891.981,569.896 " fill="none" id="_beamlineconfigStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="894.952,574.271,893.2049,564.5783,892.143,570.1346,886.5867,569.0728,894.952,574.271" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1103eaaeb21d2c0f08a9c1884c0c1344]
-link _beamlineconfigStore to _units--><path d="M623.05,329.18 C675.826,335.14 748.954,343.9 813,353.3 C834.632,356.48 858.983,360.69 877.341,364 " fill="none" id="_beamlineconfigStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="882.352,364.91,874.2061,359.3743,877.4316,364.0215,872.7844,367.247,882.352,364.91" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[76060de453c0687c7877478908282775]
-link BeamlineTable to _presetManager--><path d="M609.51,540.57 C630.454,541.019 654.075,541.526 675.243,541.98 " fill="none" id="BeamlineTable-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="680.284,542.088,671.3718,537.8961,675.2851,541.9809,671.2003,545.8942,680.284,542.088" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5455ba9f5ce98eaaac06cd004c30d6d6]
-link beamProperties to _beamlineconfigStore--><path d="M402.771,256.54 C430.921,269.05 473.479,287.96 505.347,302.13 " fill="none" id="beamProperties-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="509.969,304.18,503.3688,296.8699,505.3998,302.1496,500.1201,304.1806,509.969,304.18" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1995ceb19db107ff992e398a9a5205f3]
-link beamProperties to _units--><path d="M429.964,249.82 C514.866,260.5 678.981,284.9 813,327.3 C835.233,334.34 859.188,345.24 877.218,354.18 " fill="none" id="beamProperties-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="882.14,356.64,875.8829,349.0342,877.669,354.4016,872.3015,356.1878,882.14,356.64" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f166fb516c5b1f7a8577b7ea9202db6d]
-link beamstop to _beamstopStore--><path d="M409.94,425.23 C419.456,428.79 428.98,433.93 436,441.3 C475.628,482.947 445.354,515.669 476,564.304 C487.77,582.982 505.715,600.117 520.806,612.638 " fill="none" id="beamstop-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="524.98,616.045,520.5374,607.255,521.1067,612.8832,515.4785,613.4524,524.98,616.045" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1891423738104a4572e5076a4b323a72]
-link beamstop to _detectorStore--><path d="M415.484,422.63 C437.929,425.44 465.817,428.94 490.251,432 " fill="none" id="beamstop-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="495.409,432.65,486.9764,427.5616,490.4478,432.0281,485.9813,435.4995,495.409,432.65" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[7ae26055c92be63b1f83a74f13ca6f65]
-link beamstop to _units--><path d="M416.188,412.19 C472.805,405.6 575.239,394.06 663,386.3 C740.273,379.47 831.568,373.7 877.118,370.98 " fill="none" id="beamstop-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="882.178,370.68,872.956,367.2225,877.1869,370.9775,873.4319,375.2084,882.178,370.68" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[092350aca26c00446354e506dcb91ded]
-link _beamstopStore to _presetManager--><path d="M590.188,616.257 C600.893,611.531 612.435,606.319 623,601.304 C648.846,589.037 677.55,574.427 699.69,562.939 " fill="none" id="_beamstopStore-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="704.312,560.537,694.4815,561.1388,699.8756,562.8431,698.1713,568.2371,704.312,560.537" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f8f5570b792fc7cbc7267c74c7ae2927]
-link _beamstopStore to _types--><path d="M608.025,647.694 C662.028,658.677 744.525,668.907 813,649.304 C838.465,642.014 863.734,625.503 881.491,611.954 " fill="none" id="_beamstopStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="885.839,608.581,876.2762,610.9376,881.8886,611.646,881.1802,617.2583,885.839,608.581" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cd0d6eeb45f632b570deb01bb673f8d4]
-link _beamstopStore to _units--><path d="M608.006,633.474 C665.859,630.718 754.637,618.13 813,570.304 C870.326,523.328 894.05,433.14 902.273,391.44 " fill="none" id="_beamstopStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="903.244,386.37,897.619,394.4545,902.3014,391.2803,905.4755,395.9627,903.244,386.37" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cc2e012cd93548fb44f6c1d48ea73314]
-link cameraTube to _cameraTubeStore--><path d="M399.137,122.12 C410.501,127.31 423.946,133.53 436,139.3 C460.8,151.18 488.449,164.94 510.13,175.84 " fill="none" id="cameraTube-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="514.663,178.13,508.4195,170.513,510.196,175.8837,504.8254,177.6602,514.663,178.13" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b98a4da009f87a9fd615cc543b126100]
-link cameraTube to _units--><path d="M424.76,106.23 C513.255,102.01 695.447,105.58 813,192.3 C865.797,231.26 891.328,309.18 901.075,347.29 " fill="none" id="cameraTube-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="902.293,352.18,903.9881,342.4781,901.079,347.3296,896.2275,344.4205,902.293,352.18" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[51f90d144b96882ae919523c13b9a742]
-link _cameraTubeStore to _presetManager--><path d="M564.726,212.45 C580.233,231.63 605.208,263.99 623,294.3 C669.923,374.26 711.502,476.868 728.656,521.238 " fill="none" id="_cameraTubeStore-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="730.529,526.104,731.0267,516.2677,728.7318,521.4382,723.5614,519.1432,730.529,526.104" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[24e1f68fdaae5548182611ce749fc733]
-link _cameraTubeStore to _types--><path d="M577.736,212.39 C629.086,245.68 741.466,323.77 813,412.3 C853.697,462.67 884.122,533.665 897.882,569.21 " fill="none" id="_cameraTubeStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="899.791,574.191,900.3065,564.3556,898.0022,569.5219,892.836,567.2177,899.791,574.191" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2ff52b8f357b4ccc68ecb8b937a908a0]
-link _cameraTubeStore to _units--><path d="M615.091,188.66 C671.5,186.05 753.44,190.28 813,227.3 C858.377,255.51 886.126,314.99 898.457,347.29 " fill="none" id="_cameraTubeStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="900.304,352.24,900.8882,342.4085,898.5479,347.5585,893.3979,345.2182,900.304,352.24" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[49e584d2392b49681bb6c973a83847d4]
-link centrePlot to _beamlineconfigStore--><path d="M214.042,910.045 C217.33,836.022 236.893,474.333 308,394.3 C348.711,348.48 417.155,330.97 470.64,324.49 " fill="none" id="centrePlot-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="475.768,323.9,466.3675,320.9623,470.8012,324.4754,467.2881,328.9091,475.768,323.9" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[17e2f0fb9204db1e0088a5db68c6d712]
-link centrePlot to _beamstopStore--><path d="M219.982,910.389 C233.19,885.309 265.594,829.725 308,798.304 C356.693,762.225 385.327,784.545 436,751.304 C476.662,724.63 513.416,680.611 533.194,654.542 " fill="none" id="centrePlot-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="536.22,650.518,527.6132,655.3057,533.2143,654.5137,534.0063,660.1148,536.22,650.518" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[da964260897d31862023a421c2c3107a]
-link centrePlot to _cameraTubeStore--><path d="M214.806,910.057 C224.204,815.293 281.896,243.44 308,218.3 C331.658,195.53 416.365,192.01 478.58,192.71 " fill="none" id="centrePlot-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="483.771,192.78,474.8243,188.6621,478.7714,192.7143,474.7192,196.6614,483.771,192.78" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[227c26e375aaba699cfa574f52e64c74]
-link centrePlot to _detectorStore--><path d="M216.294,910.239 C225.07,871.127 254.716,752.476 308,668.304 C351.539,599.526 387.163,602.428 436,537.304 C457.729,508.328 448.465,489.834 476,466.3 C480.467,462.49 485.525,459.19 490.841,456.34 " fill="none" id="centrePlot-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="495.36,454.05,485.5233,454.5399,490.8976,456.3054,489.132,461.6797,495.36,454.05" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[74fdfa913bad1fff3c80abc7bfb9ddc1]
-link centrePlot to legendBar--><path d="M214.766,936.659 C221.242,1002.498 252.536,1292.104 308,1360.304 C314.117,1367.826 322.67,1373.3908 331.506,1377.4844 " fill="none" id="centrePlot-&gt;legendBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="336.429,1379.6103,329.753,1372.3694,331.8389,1377.6276,326.5807,1379.7135,336.429,1379.6103" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[774e2276e55e235112045360db7d3ce1]
-link centrePlot to _plotStore--><path d="M214.581,936.318 C220.081,999.171 247.116,1270.44 308,1323.304 C362.439,1370.5723 452.252,1364.267 505.357,1355.032 " fill="none" id="centrePlot-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="510.379,1354.131,500.8135,1351.7857,505.4578,1355.0152,502.2283,1359.6596,510.379,1354.131" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1a433a4545821ffa8217ccd8ba4a348c]
-link centrePlot to _Plotter--><path d="M213.518,936.423 C214.26,985.45 223.016,1160.403 308,1264.304 C315.342,1273.28 325.851,1279.99 336.187,1284.884 " fill="none" id="centrePlot-&gt;_Plotter" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="340.912,1287.006,334.3407,1279.6699,336.3509,1284.9576,331.0632,1286.9677,340.912,1287.006" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b4108886d4e8d8675452315385a60436]
-link centrePlot to _plotUtils--><path d="M213.963,936.747 C216.739,1008.605 233.651,1346.552 308,1411.3042 C413.617,1503.2886 491.308,1467.9832 623,1420.3042 C663.532,1405.6296 699.78,1369.5548 720.03,1346.323 " fill="none" id="centrePlot-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="723.381,1342.426,714.4795,1346.6407,720.1205,1346.2166,720.5445,1351.8576,723.381,1342.426" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[423a0401b2042c3075ea042a9878ad62]
-link centrePlot to qrange--><path d="M213.848,936.352 C215.76,979.206 228.129,1116.475 308,1179.304 C367.571,1226.165 462.533,1220.905 513.481,1213.698 " fill="none" id="centrePlot-&gt;qrange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="518.571,1212.951,509.085,1210.3023,513.6241,1213.6781,510.2483,1218.2173,518.571,1212.951" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d3c519e5934b16dad37e5c35731f1ac7]
-link centrePlot to qvalue--><path d="M213.106,936.404 C212.465,983.629 217.165,1146.347 308,1222.304 C366.856,1271.52 463.794,1266.374 514.768,1259.324 " fill="none" id="centrePlot-&gt;qvalue" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="519.854,1258.593,510.3756,1255.9171,514.9051,1259.3059,511.5163,1263.8354,519.854,1258.593" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5fd5c8f6fa94b2c6867559c9cf8f5bff]
-link centrePlot to resultsBar--><path d="M261.183,923.304 C279.472,923.304 300.425,923.304 319.092,923.304 " fill="none" id="centrePlot-&gt;resultsBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="324.292,923.304,315.292,919.304,319.292,923.304,315.292,927.304,324.292,923.304" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[756d14e4e3b21c420852f0cd1d65889d]
-link centrePlot to _resultsStore--><path d="M214.462,910.173 C218.142,870.747 235.066,753.18 308,705.304 C425.924,627.895 603.915,674.76 688.739,704.472 " fill="none" id="centrePlot-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="693.696,706.226,686.5446,699.4542,688.9821,704.559,683.8773,706.9965,693.696,706.226" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[05038317e69905c92926fb2f22ce0fa2]
-link centrePlot to scatteringQuantities--><path d="M233.699,911.41 C293.576,877.689 475.16,786.537 623,828.304 C657.296,837.993 691.437,861.217 713.286,878.269 " fill="none" id="centrePlot-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="717.22,881.377,712.6352,872.6603,713.2958,878.2785,707.6777,878.9391,717.22,881.377" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[ec0ab718f7bd762d2aaf8ed7eabe2fb9]
-link centrePlot to svgEllipse--><path d="M217.689,910.184 C228.141,879.362 258.172,801.531 308,756.304 C315.769,749.253 325.604,743.747 335.179,739.556 " fill="none" id="centrePlot-&gt;svgEllipse" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="339.848,737.603,330.0015,737.3867,335.2355,739.5329,333.0893,744.7668,339.848,737.603" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b38abf43950d7be6cbacc3ae0bbd0c79]
-link centrePlot to _types--><path d="M217.799,936.56 C228.108,966.047 257.225,1037.081 308,1070.304 C371.282,1111.711 400.615,1091.285 476,1097.304 C551.008,1103.293 759.206,1116.919 813,1064.304 C878.636,1000.108 900.077,698.512 904.866,613.6 " fill="none" id="centrePlot-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="905.145,608.556,900.6548,617.3218,904.8693,613.5484,908.6427,617.7629,905.145,608.556" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[892b893cb945f9a4f2c539e38f2932c4]
-link centrePlot to _unitRange--><path d="M227.547,935.676 C264.784,967.541 370.422,1051.981 476,1081.304 C538.95,1098.788 558.772,1093.269 623,1081.304 C636.842,1078.726 666.979,1066.992 692.791,1056.29 " fill="none" id="centrePlot-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="697.555,1054.306,687.7089,1054.0709,692.9388,1056.227,690.7826,1061.4569,697.555,1054.306" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[39eb32801e3d5d27aac83d8e87323799]
-link colourPicker to _plotUtils--><path d="M583.879,1385.8065 C596.236,1381.7754 610.321,1377.0095 623,1372.3042 C648.003,1363.025 675.668,1351.647 697.483,1342.41 " fill="none" id="colourPicker-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="702.329,1340.353,692.4815,1340.1884,697.7267,1342.3071,695.608,1347.5522,702.329,1340.353" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1a17118c4acc28502d65b21d31e03b90]
-link dataSideBar to _beamlineconfigStore--><path d="M228.606,360.32 C246.274,346.06 277.063,324.04 308,315.3 C360.84,300.38 422.831,302.37 470.641,307.83 " fill="none" id="dataSideBar-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="475.809,308.44,467.3405,303.4116,470.8435,307.8533,466.4018,311.3563,475.809,308.44" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[593a2f9d50681742633a4877e39128e4]
-link dataSideBar to beamProperties--><path d="M223.548,359.82 C239.552,339.07 272.654,299.02 308,273.3 C315.769,267.65 324.771,262.62 333.497,258.37 " fill="none" id="dataSideBar-&gt;beamProperties" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="338.306,256.09,328.4602,256.3359,333.7891,258.2341,331.8908,263.563,338.306,256.09" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[841643dca18cbc05eab8cebc34e0ad25]
-link dataSideBar to beamstop--><path d="M249.634,383.4 C274.666,390.39 307.919,399.68 333.287,406.77 " fill="none" id="dataSideBar-&gt;beamstop" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="338.251,408.16,330.6553,401.8906,333.4346,406.8177,328.5075,409.597,338.251,408.16" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c85f8075560e14db0462701e8121aacb]
-link dataSideBar to _beamstopStore--><path d="M214.052,387.02 C216.574,429.47 230.575,559.229 308,616.304 C358.836,653.779 433.292,652.985 485.866,646.014 " fill="none" id="dataSideBar-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="490.884,645.322,481.422,642.5887,485.9309,646.0049,482.5147,650.5137,490.884,645.322" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0ed4eec2974998b2b49777ecb3d26043]
-link dataSideBar to cameraTube--><path d="M217.494,359.84 C230.935,315.27 275.498,173.39 308,139.3 C314.52,132.47 322.962,127.1 331.535,122.94 " fill="none" id="dataSideBar-&gt;cameraTube" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="336.3,120.75,326.4519,120.8726,331.7566,122.8374,329.7918,128.1421,336.3,120.75" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e096a37c1e8dcccfd139f8c80b842b28]
-link dataSideBar to _cameraTubeStore--><path d="M215.343,359.63 C221.115,322.88 242.55,222.04 308,181.3 C365.618,145.44 446.819,160.67 498.557,176.63 " fill="none" id="dataSideBar-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="503.47,178.17,496.0839,171.655,498.7001,176.6705,493.6847,179.2868,503.47,178.17" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2c520802993f4a3cc52bcfad8b6ffc66]
-link dataSideBar to detectorDialog--><path d="M229.448,386.42 C247.634,400.94 278.658,424.38 308,440.3 C315.451,444.35 323.698,448.1 331.703,451.39 " fill="none" id="dataSideBar-&gt;detectorDialog" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="336.647,453.39,329.7931,446.3172,332.0091,451.522,326.8043,453.7379,336.647,453.39" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[de5213a13e684cdbe5b67250157e3f54]
-link dataSideBar to _detectorStore--><path d="M267.711,374.1 C313.209,375.8 379.619,380.67 436,394.3 C460.901,400.33 487.571,410.8 508.691,420.13 " fill="none" id="dataSideBar-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="513.385,422.23,506.7925,414.913,508.8179,420.1948,503.5361,422.2203,513.385,422.23" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[68e1666d1c6d9c9c91d4339b438ed383]
-link dataSideBar to presetDialog--><path d="M221.058,386.87 C235.137,410.98 267.644,461.45 308,490.304 C314.234,494.761 321.426,498.447 328.672,501.463 " fill="none" id="dataSideBar-&gt;presetDialog" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="333.686,503.445,326.7872,496.416,329.0363,501.6065,323.8457,503.8555,333.686,503.445" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1ef20da347afa981d621ea60c35b03fb]
-link dataSideBar to _presetManager--><path d="M217.046,387.09 C226.109,419.3 253.354,499.622 308,537.304 C419.187,613.977 588.087,585.047 677.165,561.644 " fill="none" id="dataSideBar-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="682.131,560.323,672.4051,558.7713,677.2991,561.6085,674.4619,566.5024,682.131,560.323" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0ccfb32cb233dd35566530626feb0a1e]
-link dataSideBar to _units--><path d="M217.746,359.69 C235.368,303.27 302.103,90.57 308,86.3 C399.517,20.09 727.568,70.4 813,144.3 C875.793,198.62 896.978,302.05 903.437,347.25 " fill="none" id="dataSideBar-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="904.119,352.21,906.8737,342.7542,903.4473,347.2553,898.9462,343.8289,904.119,352.21" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1304498b7e36290b0ef7968c5014725f]
-link detectorDialog to _detectorStore--><path d="M424.234,457.71 C444.934,454.65 468.933,451.09 490.29,447.93 " fill="none" id="detectorDialog-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="495.373,447.17,485.8837,444.5332,490.4271,447.9033,487.057,452.4467,495.373,447.17" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5d956cd3429e9aeaaddc26d227784ecf]
-link detectorDialog to detectorTable--><path d="M424.707,472.67 C446.236,475.737 471.269,479.303 493.167,482.422 " fill="none" id="detectorDialog-&gt;detectorTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="498.37,483.163,490.0244,477.9331,493.42,482.4575,488.8956,485.8531,498.37,483.163" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f07384b8ff2a7dbb07de36af19cbd0c7]
-link _detectorStore to _presetManager--><path d="M603.505,455.55 C610.329,458.64 617.015,462.21 623,466.3 C645.08,481.421 641.317,495.623 663,511.304 C669.575,516.059 676.966,520.302 684.467,524.02 " fill="none" id="_detectorStore-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="689.146,526.267,682.7644,518.7653,684.6387,524.1026,679.3014,525.977,689.146,526.267" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[47685ed1073a677d32df603d637da26a]
-link _detectorStore to _types--><path d="M603.542,453.66 C674.68,473.108 794.273,506.507 813,516.304 C840.339,530.606 867.306,553.61 885.103,570.374 " fill="none" id="_detectorStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="888.98,574.064,885.219,564.9616,885.3584,570.6167,879.7033,570.7561,888.98,574.064" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[759abe2480fa291aedf7b67b32a4022b]
-link _detectorStore to _units--><path d="M603.722,428.82 C679.871,413.83 817.296,386.77 877.001,375.01 " fill="none" id="_detectorStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="882.191,373.99,872.5886,371.8005,877.2848,374.9541,874.1312,379.6503,882.191,373.99" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[ff42201d10293b0603335a2bd8d43f43]
-link detectorTable to _presetManager--><path d="M588.241,501.03 C613.194,508.121 646.484,517.581 675.245,525.755 " fill="none" id="detectorTable-&gt;_presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="680.189,527.16,672.6255,520.8518,675.3795,525.793,670.4383,528.547,680.189,527.16" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[9ab77d2b3e6b24773d077a36433313b6]
-link detectorTable to _types--><path d="M592.53,499.987 C603.113,503.674 614.01,508.652 623,515.304 C647.297,533.283 636.682,555.441 663,570.304 C730.414,608.377 825.486,602.778 874.321,596.468 " fill="none" id="detectorTable-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="879.471,595.777,870.0194,593.0082,874.5153,596.4413,871.0822,600.9372,879.471,595.777" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[08824a3ba6720dad2419584cda81b6e8]
-link legendBar to colourPicker--><path d="M419.111,1390.4061 C440.921,1391.4003 467.199,1392.5982 490.36,1393.6539 " fill="none" id="legendBar-&gt;colourPicker" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="495.558,1393.8909,486.7503,1389.4837,490.5632,1393.6623,486.3846,1397.4753,495.558,1393.8909" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[859e2ca28cb76f44f0370c60baffe4d6]
-link legendBar to _plotStore--><path d="M408.093,1379.7059 C436.083,1372.848 475.415,1363.211 505.332,1355.881 " fill="none" id="legendBar-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="510.426,1354.633,500.7327,1352.8896,505.5696,1355.8228,502.6364,1360.6598,510.426,1354.633" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[a7ba3c821d48259f80a967b14cc45774]
-link <b>main</b> to app--><path d="M61.5,340.33 C61.5,345.15 61.5,349.97 61.5,354.78 " fill="none" id="&lt;b&gt;main&lt;/b&gt;-&gt;app" style="stroke: #000000; stroke-width: 1.0;"/><polygon fill="#000000" points="61.5,360.01,65.5,351.01,61.5,355.01,57.5,351.01,61.5,360.01" style="stroke: #000000; stroke-width: 1.0;"/><!--MD5=[82c1f8e9a20de97d7eabc92ecd792005]
-link _Plotter to _plotStore--><path d="M403.17,1304.728 C431.357,1312.598 473.736,1324.43 505.468,1333.29 " fill="none" id="_Plotter-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="510.466,1334.685,502.8729,1328.4125,505.6501,1333.3407,500.7219,1336.1179,510.466,1334.685" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[49d95620f04899f6aa063a5444cfa81d]
-link _Plotter to _plotUtils--><path d="M403.097,1298.702 C468.552,1303.917 623.845,1316.289 697.251,1322.137 " fill="none" id="_Plotter-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="702.392,1322.547,693.7381,1317.8448,697.4078,1322.1499,693.1027,1325.8195,702.392,1322.547" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f66ddaf772cc78b11c3af50aec607105]
-link _plotUtils to _numericRange--><path d="M773.56,1315.324 C786.362,1310.957 800.736,1305.233 813,1298.304 C839.695,1283.222 866.569,1260.551 884.515,1244.084 " fill="none" id="_plotUtils-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="888.43,1240.46,879.108,1243.6381,884.7606,1243.8564,884.5423,1249.5091,888.43,1240.46" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[3ae45d922cbb786ba94a2cdbaf50af1b]
-link presetDialog to BeamlineTable--><path d="M420.031,520.272 C442.496,523.6 469.537,527.606 493.003,531.082 " fill="none" id="presetDialog-&gt;BeamlineTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="497.953,531.816,489.6365,526.54,493.007,531.0831,488.4639,534.4536,497.953,531.816" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[7f5fe60813a35e43730d1dbc085547b9]
-link _presetManager to _types--><path d="M795.539,559.555 C821.93,567.14 852.347,575.883 874.572,582.271 " fill="none" id="_presetManager-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="879.469,583.679,871.9243,577.3483,874.6636,582.2977,869.7142,585.0369,879.469,583.679" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0596d30483a882cc19ac5c32929d0c5a]
-link qrange to _numericRange--><path d="M583.307,1208.781 C643.485,1211.489 772.244,1217.284 847.658,1220.678 " fill="none" id="qrange-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="852.994,1220.919,844.1837,1216.5169,847.9991,1220.6933,843.8226,1224.5087,852.994,1220.919" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[157ef11e6a0ba65ccbc9363f896c36c5]
-link qrange to _qspace--><path d="M580.88,1202.092 C613.344,1196.521 664.84,1187.686 699.732,1181.699 " fill="none" id="qrange-&gt;_qspace" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="704.755,1180.837,695.208,1178.4172,699.8271,1181.6829,696.5614,1186.3019,704.755,1180.837" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c36a8607e6475574cee7fb0a79f5dc5f]
-link qrange to _ray--><path d="M576.415,1215.263 C590.277,1219.586 607.614,1225.099 623,1230.304 C654.249,1240.876 689.999,1253.884 713.005,1262.374 " fill="none" id="qrange-&gt;_ray" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="717.714,1264.115,710.6581,1257.2437,713.0239,1262.3821,707.8855,1264.7479,717.714,1264.115" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[781606cfc6e5fc380a20c156d0bd8efa]
-link qrange to _types--><path d="M576.486,1199.326 C590.683,1194.466 608.313,1187.596 623,1179.304 C642.586,1168.247 643.065,1158.72 663,1148.304 C724.92,1115.952 766.736,1153.654 813,1101.304 C878.748,1026.907 900.245,701.936 904.93,613.559 " fill="none" id="qrange-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="905.202,608.324,900.7394,617.1038,904.942,613.3172,908.7286,617.5198,905.202,608.324" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[62e662b571a1e13086db8d9d47736400]
-link _qspace to _types--><path d="M771.068,1168.883 C786.013,1164.25 802.725,1156.414 813,1143.304 C879.495,1058.466 900.581,706.177 905.026,613.646 " fill="none" id="_qspace-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="905.272,608.43,900.8521,617.2314,905.0363,613.4244,908.8433,617.6086,905.272,608.43" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2b7bdd1805499b0002c364951c568ca3]
-link qvalue to _plotUtils--><path d="M573.434,1261.938 C587.735,1267.377 606.495,1274.612 623,1281.304 C640.901,1288.563 645.032,1291.214 663,1298.304 C674.131,1302.697 686.298,1307.241 697.492,1311.32 " fill="none" id="qvalue-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="702.224,1313.038,695.1303,1306.2057,697.5244,1311.331,692.3991,1313.7251,702.224,1313.038" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cc578e726c93036f57cbbbd44df52c7a]
-link qvalue to _ray--><path d="M580.88,1256.236 C617.62,1259.782 678.734,1265.681 712.573,1268.947 " fill="none" id="qvalue-&gt;_ray" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="717.762,1269.447,709.1875,1264.6015,712.7851,1268.967,708.4196,1272.5646,717.762,1269.447" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e3d73fafa21a9812183994b7122589ba]
-link rangeDiagram to _unitRange--><path d="M608.487,1035.237 C635.241,1035.667 666.537,1036.171 691.546,1036.573 " fill="none" id="rangeDiagram-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="696.783,1036.657,687.8481,1032.5135,691.7836,1036.577,687.7202,1040.5125,696.783,1036.657" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e5ff59a501fdb35405cbd1ecb801cb13]
-link rangeTable to _resultsStore--><path d="M568.382,839.031 C600.666,816.874 668.946,770.012 707.991,743.214 " fill="none" id="rangeTable-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="712.139,740.367,702.4548,742.1602,708.016,743.1956,706.9806,748.7569,712.139,740.367" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d799cd6b21528669722a26ecffb8ffa9]
-link rangeTable to scatteringQuantities--><path d="M586.902,860.478 C613.657,867.221 650.51,876.508 681.003,884.192 " fill="none" id="rangeTable-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="686.228,885.509,678.4778,879.4316,681.3795,884.2876,676.5235,887.1893,686.228,885.509" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[da8458e95ab223cabcc393d0ddb71351]
-link rangeTable to _unitRange--><path d="M591.469,859.245 C602.405,862.665 613.743,867.5 623,874.304 C629.843,879.334 693.5,972.906 722.603,1015.955 " fill="none" id="rangeTable-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="725.476,1020.206,723.7527,1010.5091,722.6772,1016.0628,717.1235,1014.9872,725.476,1020.206" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[bf1fd359bb09bada2fc721f388a83091]
-link rangeTable to _units--><path d="M588.493,860.072 C645.434,870.745 752.649,880.885 813,823.304 C855.136,783.102 840.899,621.271 853,564.304 C866.479,500.851 888.137,427.33 899.126,391.39 " fill="none" id="rangeTable-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="900.668,386.36,894.1972,393.7849,899.197,391.1387,901.8431,396.1385,900.668,386.36" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[738392c8b93e1f7abe76e3831bf71f28]
-link _ray to _numericRange--><path d="M758.157,1265.798 C779.952,1259.534 816.586,1249.004 847.934,1239.994 " fill="none" id="_ray-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="852.916,1238.562,843.1612,1237.2041,848.1106,1239.9433,845.3713,1244.8927,852.916,1238.562" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b6bb703ad39547b021a8c4ecd01eb7ab]
-link resultsBar to MessageDiagram--><path d="M415.037,917.795 C435.872,915.065 461.477,911.709 484.669,908.67 " fill="none" id="resultsBar-&gt;MessageDiagram" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="489.887,907.986,480.4442,905.187,484.9292,908.6345,481.4818,913.1195,489.887,907.986" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[6a36f5b4999f4480cfc82ddf050159b2]
-link resultsBar to _numericRange--><path d="M414.349,929.254 C517.815,944.453 781.86,985.268 813,1010.304 C874.344,1059.624 896.199,1157.456 903.128,1201.232 " fill="none" id="resultsBar-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="903.901,1206.295,906.4975,1196.7946,903.1467,1201.3522,898.5891,1198.0014,903.901,1206.295" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e685bebbe24c6d328514b7c19be7463a]
-link resultsBar to rangeDiagram--><path d="M386.062,935.809 C404.768,953.203 440.824,984.862 476,1005.304 C486.461,1011.383 498.44,1016.749 509.607,1021.159 " fill="none" id="resultsBar-&gt;rangeDiagram" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="514.336,1022.99,507.3885,1016.0091,509.6736,1021.1839,504.4988,1023.469,514.336,1022.99" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[81dde4b43ce4c99d877ce2d82a86b82e]
-link resultsBar to rangeTable--><path d="M395.113,911.699 C415.71,901.152 447.446,885.564 476,874.304 C486.653,870.103 498.408,866.109 509.296,862.664 " fill="none" id="resultsBar-&gt;rangeTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="514.23,861.121,504.4466,859.9874,509.4576,862.6123,506.8327,867.6233,514.23,861.121" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[993f8bb94a42bb540980ca6aef589b54]
-link resultsBar to _resultsStore--><path d="M379.476,910.107 C393.307,883.35 428.392,822.599 476,791.304 C540.06,749.194 628.932,733.133 684.679,727.026 " fill="none" id="resultsBar-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="689.968,726.466,680.5964,723.4373,684.9959,726.9932,681.4399,731.3927,689.968,726.466" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f512c4e3e8f7ee8d0ef86666be1ccb3a]
-link resultsBar to scatteringQuantities--><path d="M417.448,927.365 C467.586,931.129 551.468,934.96 623,926.304 C644.17,923.742 667.078,918.597 686.768,913.408 " fill="none" id="resultsBar-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="691.702,912.09,681.9743,910.5498,686.8716,913.3812,684.0402,918.2784,691.702,912.09" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[4548d82b079e5330e8b9bef202663786]
-link resultsBar to _unitRange--><path d="M378.225,936.532 C390.346,965.142 423.42,1032.285 476,1058.304 C545.212,1092.554 637.494,1072.103 691.754,1054.466 " fill="none" id="resultsBar-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="696.561,1052.878,686.7605,1051.9028,691.8133,1054.4463,689.2698,1059.499,696.561,1052.878" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c66619fc71b08ccb6dfb96dbbab0fb64]
-link resultsBar to _units--><path d="M382.919,910.622 C399.75,890.017 435.997,849.448 476,828.304 C611.919,756.463 705.144,859.859 813,750.304 C872.322,690.048 833.015,646.465 853,564.304 C868.332,501.273 889.166,427.56 899.555,391.48 " fill="none" id="resultsBar-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="901.01,386.44,894.6725,393.9789,899.6243,391.2442,902.3591,396.196,901.01,386.44" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[95ec0a6772fe0d0910ec9af1a6eb4857]
-link _resultsStore to _units--><path d="M760.867,706.276 C777.259,692.485 799.162,671.722 813,649.304 C840.815,604.244 884.365,449.32 900.089,391.4 " fill="none" id="_resultsStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="901.435,386.42,895.2316,394.0697,900.1344,391.2479,902.9563,396.1507,901.435,386.42" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[51d0e88da8530ca185511c1bba80cc5c]
-link _unitRange to _numericRange--><path d="M754.412,1054.469 C785.107,1088.657 853.788,1165.152 887.126,1202.283 " fill="none" id="_unitRange-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="890.626,1206.181,887.5896,1196.8119,887.2856,1202.4606,881.6369,1202.1565,890.626,1206.181" style="stroke: #000000; stroke-width: 0.5;"/><script type="text/plantuml"><![CDATA[MD5=[68eb3a6fcd958861c4c7f047d5ba4285]
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="1747px" preserveAspectRatio="none" style="width:1027px;height:1747px;" version="1.1" viewBox="0 0 1027 1747" width="1027px" zoomAndPan="magnify"><defs/><g><ellipse cx="58.3492" cy="1100.128" fill="#F8F8F8" rx="17.8492" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="21" x="47.8492" y="1103.8702">app</text><ellipse cx="520.7046" cy="1173.128" fill="#F8F8F8" rx="53.2046" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="71" x="485.2046" y="1176.8702">basicAppBar</text><!--MD5=[a6ea44cb3a57a1d10010999a6b55e716]
+entity _beamlineconfigStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="139" x="627" y="1289.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="119" x="637" y="1311.8919">beamlineconfigStore</text><ellipse cx="355.3714" cy="1296.8603" fill="#F8F8F8" rx="60.3714" ry="14.4743" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="89" x="310.8714" y="1300.6025">beamlineDialog</text><ellipse cx="520.4548" cy="1387.977" fill="#F8F8F8" rx="58.4548" ry="14.091" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="84" x="478.4548" y="1391.7191">BeamlineTable</text><ellipse cx="520.2601" cy="1124.938" fill="#F8F8F8" rx="60.7601" ry="14.552" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="90" x="475.2601" y="1128.6802">beamProperties</text><ellipse cx="520.5122" cy="1077.128" fill="#F8F8F8" rx="44.0122" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="58" x="491.5122" y="1080.8702">beamstop</text><!--MD5=[b3288f82aea54a3eaf1575100e7d0de8]
+entity _beamstopStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="109" x="642" y="1025.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="89" x="652" y="1047.8919">beamstopStore</text><ellipse cx="520.7046" cy="863.128" fill="#F8F8F8" rx="53.2046" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="71" x="485.2046" y="866.8702">cameraTube</text><!--MD5=[cb61f5a9fbf6155a70854d96a1a0186b]
+entity _cameraTubeStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="122" x="635.5" y="929.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="102" x="645.5" y="951.8919">cameraTubeStore</text><ellipse cx="203.0122" cy="511.132" fill="#F8F8F8" rx="44.0122" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="58" x="174.0122" y="514.8742">centrePlot</text><ellipse cx="520.7046" cy="21.132" fill="#F8F8F8" rx="53.2046" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="71" x="485.2046" y="24.8742">colourPicker</text><ellipse cx="202.7904" cy="1100.128" fill="#F8F8F8" rx="51.7904" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="69" x="168.2904" y="1103.8702">dataSideBar</text><ellipse cx="355.3344" cy="1601.0529" fill="#F8F8F8" rx="58.8344" ry="14.1669" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="85" x="312.8344" y="1604.7951">detectorDialog</text><!--MD5=[2954216a28af559177fd560618bc1dcd]
+entity _detectorStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="99" x="647" y="1459.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="79" x="657" y="1481.8919">detectorStore</text><ellipse cx="520.5862" cy="1646.1031" fill="#F8F8F8" rx="56.5862" ry="13.7172" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="79" x="481.0862" y="1649.8453">detectorTable</text><ellipse cx="355.3051" cy="27.132" fill="#F8F8F8" rx="43.3051" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="57" x="326.8051" y="30.8742">legendBar</text><ellipse cx="58.6274" cy="1054.128" fill="#F8F8F8" rx="25.6274" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="32" x="42.6274" y="1057.8702">main</text><ellipse cx="520.3309" cy="557.6562" fill="#F8F8F8" rx="64.3309" ry="15.2662" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="99" x="470.8309" y="561.3984">MessageDiagram</text><!--MD5=[29dac6c96591de790f438864f2e7c125]
+entity _numericRange--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="101" x="816" y="234.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="81" x="826" y="256.8959">numericRange</text><!--MD5=[ac8ec82d29538cc90342a8d0c02e821d]
+entity _plotStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="73" x="484" y="53.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="53" x="494" y="75.8959">plotStore</text><!--MD5=[478350613ba6941540b6248a553517e2]
+entity _Plotter--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="57" x="327" y="101.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="37" x="337" y="123.8959">Plotter</text><!--MD5=[682890370432bf166a9007ef5c4f77fa]
+entity _plotUtils--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="67" x="663" y="132.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="47" x="673" y="154.8959">plotUtils</text><ellipse cx="866.4548" cy="1305.977" fill="#F8F8F8" rx="58.4548" ry="14.091" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="84" x="824.4548" y="1309.7191">presetManager</text><ellipse cx="520.5772" cy="251.132" fill="#F8F8F8" rx="30.5772" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="39" x="501.0772" y="254.8742">qrange</text><!--MD5=[69536b9dc36a4a7375270f59c9e888e0]
+entity _qspace--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="62" x="835.5" y="300.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="42" x="845.5" y="322.8959">qspace</text><ellipse cx="520.663" cy="205.132" fill="#F8F8F8" rx="29.163" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="37" x="502.163" y="208.8742">qvalue</text><ellipse cx="520.4558" cy="423.6812" fill="#F8F8F8" rx="56.9558" ry="13.7912" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="80" x="480.4558" y="427.4234">rangeDiagram</text><ellipse cx="520.5477" cy="649.132" fill="#F8F8F8" rx="47.5477" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="63" x="489.0477" y="652.8742">rangeTable</text><!--MD5=[551ef8a1ec5300c6a2cdd5ab44cb90de]
+entity _ray--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="37" x="678" y="186.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="17" x="688" y="208.8959">ray</text><ellipse cx="355.5122" cy="601.132" fill="#F8F8F8" rx="44.0122" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="58" x="326.5122" y="604.8742">resultsBar</text><!--MD5=[7efb2db2f2184c088c9dbbb8036c83c7]
+entity _resultsStore--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="90" x="651.5" y="704.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="70" x="661.5" y="726.8959">resultsStore</text><ellipse cx="696.3757" cy="605.0651" fill="#F8F8F8" rx="71.3757" ry="16.6751" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="116" x="638.3757" y="608.8073">scatteringQuantities</text><ellipse cx="355.3051" cy="555.132" fill="#F8F8F8" rx="43.3051" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="57" x="326.8051" y="558.8742">svgEllipse</text><!--MD5=[0190f419ef54fc162964943b68b4f170]
+entity _types--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="51" x="965" y="1199.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="31" x="975" y="1221.8919">types</text><!--MD5=[37349b9385241d7e086cfee13ce1f69a]
+entity _unitRange--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="76" x="658.5" y="408.89"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="56" x="668.5" y="430.8959">unitRange</text><!--MD5=[2e43345867f0b2f1f095711d58ea3100]
+entity _units--><rect fill="#F8F8F8" height="34.4844" rx="3" ry="3" style="stroke: #000000; stroke-width: 0.5;" width="48" x="842.5" y="977.886"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="28" x="852.5" y="999.8919">units</text><ellipse cx="58.4619" cy="1008.128" fill="#F8F8F8" rx="48.9619" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="65" x="25.9619" y="1011.8702">vite-env.d</text><ellipse cx="58.4975" cy="962.128" fill="#F8F8F8" rx="52.4975" ry="13.242" style="stroke: #383838; stroke-width: 0.5;"/><text fill="#000000" font-family="Tahoma, sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="70" x="23.4975" y="965.8702">vite.config</text><!--MD5=[8d1b8dcf6968eb6c0f6a0eeba4da8d0b]
+link app to basicAppBar--><path d="M75.5762,1104.506 C93.7549,1109.594 124.302,1117.736 151,1122.886 C262.279,1144.352 394.21,1159.888 466.152,1167.534 " fill="none" id="app-&gt;basicAppBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="471.227,1168.071,462.6989,1163.1443,466.2549,1167.5438,461.8554,1171.0997,471.227,1168.071" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[27b8899d8d132aae21cf1d9ed0d6989c]
+link app to centrePlot--><path d="M76.0026,1096.825 C87.6099,1093.783 102.5287,1087.912 111,1076.886 C179.448,987.792 197.943,615.62 201.356,528.97 " fill="none" id="app-&gt;centrePlot" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="201.551,523.91,197.2194,532.7552,201.3653,528.9065,205.2139,533.0524,201.551,523.91" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0810c7685c88ac48a48b75abc1428981]
+link app to dataSideBar--><path d="M76.6888,1099.886 C93.7588,1099.886 120.872,1099.886 145.518,1099.886 " fill="none" id="app-&gt;dataSideBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="150.736,1099.886,141.736,1095.886,145.736,1099.886,141.736,1103.886,150.736,1099.886" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cb79cf68647b5cb239913d9bebb0cb07]
+link basicAppBar to _beamlineconfigStore--><path d="M531.809,1185.633 C549.214,1206.507 586.327,1248.309 625,1274.886 C631.697,1279.488 639.162,1283.701 646.66,1287.452 " fill="none" id="basicAppBar-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="651.326,1289.727,644.9896,1282.1871,646.8318,1287.5356,641.4833,1289.3779,651.326,1289.727" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d5b5f7e7db4763188e527d021e1f4680]
+link basicAppBar to _beamstopStore--><path d="M556.342,1163.234 C566.011,1159.779 576.249,1155.353 585,1149.886 C604.967,1137.412 649.852,1091.359 675.856,1063.902 " fill="none" id="basicAppBar-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="679.55,1059.992,670.4613,1063.7861,676.1159,1063.6261,676.2759,1069.2807,679.55,1059.992" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[7921f7b70aeb436d8beccca1759cbdc1]
+link basicAppBar to _cameraTubeStore--><path d="M561.801,1164.635 C570.374,1161.269 578.721,1156.536 585,1149.886 C627.669,1104.694 592.879,1069.095 625,1015.886 C636.326,997.123 653.946,979.877 668.736,967.32 " fill="none" id="basicAppBar-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="672.825,963.905,663.353,966.6035,668.9872,967.1099,668.4808,972.744,672.825,963.905" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[a53683efcb8c10ceff36ad11e470ad38]
+link basicAppBar to _detectorStore--><path d="M528.977,1185.948 C556.047,1233.244 649.126,1395.865 683.025,1455.091 " fill="none" id="basicAppBar-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="685.552,1459.505,684.5524,1449.707,683.0681,1455.1656,677.6094,1453.6813,685.552,1459.505" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[25c3e4fbb57df2ce1c1a5f4bd384aebc]
+link basicAppBar to presetManager--><path d="M549.651,1183.77 C611.862,1207.822 760.959,1265.468 829.689,1292.04 " fill="none" id="basicAppBar-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="834.496,1293.899,827.5441,1286.9225,829.8324,1292.0959,824.6591,1294.3842,834.496,1293.899" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c88ccc7ce9192c94659d87e570087f24]
+link basicAppBar to _units--><path d="M572.898,1170.72 C625.521,1166.385 707.893,1153.56 768,1115.886 C807.76,1090.964 838.501,1044.049 854.124,1016.533 " fill="none" id="basicAppBar-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="856.682,1011.96,848.7964,1017.8606,854.2403,1016.3233,855.7776,1021.7672,856.682,1011.96" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2c5a3409c0970752d8e3e7b370d0f02e]
+link _beamlineconfigStore to presetManager--><path d="M766.317,1306.476 C778.369,1306.404 790.852,1306.33 802.729,1306.259 " fill="none" id="_beamlineconfigStore-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="807.779,1306.229,798.7552,1302.2831,802.7791,1306.259,798.8032,1310.2829,807.779,1306.229" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f023a1ddb850476760c038fde5bccad9]
+link _beamlineconfigStore to _types--><path d="M752.766,1289.852 C814.308,1270.883 911.486,1240.931 959.96,1225.991 " fill="none" id="_beamlineconfigStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="964.779,1224.505,955.0001,1223.3334,960.0008,1225.9777,957.3565,1230.9785,964.779,1224.505" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1103eaaeb21d2c0f08a9c1884c0c1344]
+link _beamlineconfigStore to _units--><path d="M706.772,1289.667 C735.341,1236.61 822.006,1075.661 853.715,1016.771 " fill="none" id="_beamlineconfigStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="856.257,1012.052,848.4667,1018.0779,853.8854,1016.4538,855.5095,1021.8725,856.257,1012.052" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cef44439f357db85a391aaa3af015476]
+link beamlineDialog to _beamlineconfigStore--><path d="M415.937,1298.639 C473.194,1300.328 559.969,1302.888 621.638,1304.707 " fill="none" id="beamlineDialog-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="626.779,1304.859,617.9006,1300.5958,621.7812,1304.7118,617.6652,1308.5924,626.779,1304.859" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d91b0af663a27f32b1c71375c4404bdf]
+link beamlineDialog to BeamlineTable--><path d="M380.551,1310.313 C410.262,1326.9 460.698,1355.058 491.94,1372.5 " fill="none" id="beamlineDialog-&gt;BeamlineTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="496.406,1374.993,490.4973,1367.1134,492.0402,1372.5558,486.5978,1374.0987,496.406,1374.993" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[bf38fa111286f8b222b1383685e9e858]
+link beamlineDialog to presetManager--><path d="M363.617,1311.308 C377.324,1337.224 410.139,1390.921 456,1411.886 C594.927,1475.394 778.443,1365.716 842.368,1322.361 " fill="none" id="beamlineDialog-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="846.762,1319.357,837.0748,1321.1341,842.6343,1322.1788,841.5896,1327.7383,846.762,1319.357" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[a4f0e2c57f133afdf156fcebe888438b]
+link beamlineDialog to _types--><path d="M408.969,1290.022 C493.126,1279.041 663.51,1256.923 808,1238.886 C861.436,1232.215 923.76,1224.724 959.723,1220.429 " fill="none" id="beamlineDialog-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="964.833,1219.819,955.4223,1216.9141,959.8683,1220.4117,956.3707,1224.8577,964.833,1219.819" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2ea7845b182a81617fcad8462c7308ce]
+link BeamlineTable to _beamlineconfigStore--><path d="M548.724,1375.535 C559.968,1370.413 573.125,1364.391 585,1358.886 C608.069,1348.191 633.775,1336.104 654.584,1326.277 " fill="none" id="BeamlineTable-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="659.218,1324.087,649.3718,1324.3141,654.697,1326.2225,652.7886,1331.5477,659.218,1324.087" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[926ecf4a29be9dfa448d41475ec1cf2f]
+link BeamlineTable to _types--><path d="M573.081,1394.029 C655.113,1401.042 817.044,1403.338 925,1329.886 C956.866,1308.204 974.907,1265.227 983.396,1238.972 " fill="none" id="BeamlineTable-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="984.968,1233.956,978.4611,1241.3492,983.4737,1238.7275,986.0954,1243.7401,984.968,1233.956" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5455ba9f5ce98eaaac06cd004c30d6d6]
+link beamProperties to _beamlineconfigStore--><path d="M560.371,1136.053 C569.002,1139.622 577.735,1144.174 585,1149.886 C609.99,1169.534 659.087,1247.065 682.493,1285.314 " fill="none" id="beamProperties-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="685.216,1289.777,683.9418,1280.0109,682.6112,1285.5091,677.1131,1284.1785,685.216,1289.777" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1995ceb19db107ff992e398a9a5205f3]
+link beamProperties to _units--><path d="M577.088,1119.471 C628.562,1112.865 706.242,1098.78 768,1069.886 C796.953,1056.34 825.38,1032.995 843.999,1015.94 " fill="none" id="beamProperties-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="848.051,1012.186,838.7303,1015.368,844.3831,1015.584,844.1671,1021.2367,848.051,1012.186" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f166fb516c5b1f7a8577b7ea9202db6d]
+link beamstop to _beamstopStore--><path d="M557.553,1069.841 C580.417,1065.373 610.528,1059.49 636.784,1054.359 " fill="none" id="beamstop-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="641.98,1053.344,632.3795,1051.1464,637.073,1054.304,633.9154,1058.9975,641.98,1053.344" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1891423738104a4572e5076a4b323a72]
+link beamstop to _detectorStore--><path d="M558.128,1083.633 C568.179,1087.188 578.176,1092.613 585,1100.886 C651.859,1181.939 592.545,1233.954 625,1333.886 C639.629,1378.93 666.196,1427.642 682.209,1454.997 " fill="none" id="beamstop-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="684.877,1459.526,683.7508,1449.7417,682.3372,1455.2191,676.8598,1453.8055,684.877,1459.526" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[131b0465e9e2cc08fc8218ddaab1d7ea]
+link beamstop to _types--><path d="M552.207,1086.072 C637.443,1111.57 876.192,1182.99 959.982,1208.056 " fill="none" id="beamstop-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="964.802,1209.498,957.3259,1203.0865,960.0117,1208.0651,955.0332,1210.7509,964.802,1209.498" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[7ae26055c92be63b1f83a74f13ca6f65]
+link beamstop to _units--><path d="M536.919,1064.773 C556.263,1050.324 591.032,1026.76 625,1015.886 C698.796,992.261 791.433,991.806 837.212,993.377 " fill="none" id="beamstop-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="842.292,993.567,833.448,989.233,837.2955,993.3799,833.1486,997.2274,842.292,993.567" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[666a710d1e968a5be0766850d287cf3e]
+link _beamstopStore to presetManager--><path d="M708.523,1060.142 C738.719,1107.414 822.588,1238.708 853.693,1287.402 " fill="none" id="_beamstopStore-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="856.534,1291.85,855.061,1282.1119,853.8428,1287.6361,848.3187,1286.4179,856.534,1291.85" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f8f5570b792fc7cbc7267c74c7ae2927]
+link _beamstopStore to _types--><path d="M738.744,1059.997 C785.756,1080.371 863.975,1116.961 925,1158.886 C940.973,1169.86 957.186,1184.457 969.361,1196.262 " fill="none" id="_beamstopStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="973.006,1199.829,969.3704,1190.6757,969.4321,1196.3322,963.7756,1196.394,973.006,1199.829" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cd0d6eeb45f632b570deb01bb673f8d4]
+link _beamstopStore to _units--><path d="M751.118,1027.566 C779.807,1019.37 813.959,1009.612 837.432,1002.905 " fill="none" id="_beamstopStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="842.273,1001.522,832.5203,1000.1492,837.4655,1002.896,834.7187,1007.8412,842.273,1001.522" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cc2e012cd93548fb44f6c1d48ea73314]
+link cameraTube to _cameraTubeStore--><path d="M547.904,874.151 C559.369,879.139 572.912,885.163 585,890.886 C609.681,902.571 637.061,916.44 658.392,927.453 " fill="none" id="cameraTube-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="662.849,929.758,656.6935,922.0697,658.4082,927.4604,653.0174,929.175,662.849,929.758" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b98a4da009f87a9fd615cc543b126100]
+link cameraTube to _units--><path d="M569.829,867.876 C621.034,874.551 703.268,889.295 768,919.886 C796.901,933.544 825.337,956.87 843.972,973.889 " fill="none" id="cameraTube-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="848.028,977.636,844.1295,968.5916,844.3546,974.2439,838.7022,974.469,848.028,977.636" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[a0f8c73950ed7aaed729061f5adc9c60]
+link _cameraTubeStore to presetManager--><path d="M719.959,964.037 C735.369,976.843 755.259,995.575 768,1015.886 C825.871,1108.142 853.585,1238.639 862.326,1286.947 " fill="none" id="_cameraTubeStore-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="863.207,1291.894,865.5685,1282.3324,862.3311,1286.9713,857.6922,1283.7339,863.207,1291.894" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[24e1f68fdaae5548182611ce749fc733]
+link _cameraTubeStore to _types--><path d="M757.643,935.036 C808.185,928.752 879.297,929.023 925,967.886 C959.851,997.521 980.232,1139.22 986.981,1194.618 " fill="none" id="_cameraTubeStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="987.592,1199.703,990.4912,1190.2905,986.9963,1194.7386,982.5482,1191.2437,987.592,1199.703" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2ff52b8f357b4ccc68ecb8b937a908a0]
+link _cameraTubeStore to _units--><path d="M757.204,963.944 C784.445,971.727 815.417,980.576 837.24,986.812 " fill="none" id="_cameraTubeStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="842.306,988.259,834.7522,981.9392,837.4986,986.8846,832.5532,989.6311,842.306,988.259" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[49e584d2392b49681bb6c973a83847d4]
+link centrePlot to _beamlineconfigStore--><path d="M204.771,523.9 C208.404,578.85 226.622,796.503 295,958.886 C344.419,1076.245 358.938,1113.459 456,1195.886 C508.114,1240.142 580.825,1270.514 632.428,1288.153 " fill="none" id="centrePlot-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="637.355,1289.821,630.1124,1283.1468,632.6189,1288.218,627.5477,1290.7245,637.355,1289.821" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[17e2f0fb9204db1e0088a5db68c6d712]
+link centrePlot to _beamstopStore--><path d="M203.684,524.02 C203.176,573.9 207.725,754.115 295,859.886 C383.697,967.38 549.169,1014.579 637.089,1032.845 " fill="none" id="centrePlot-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="641.992,1033.851,633.9787,1028.125,637.0939,1032.8468,632.372,1035.9619,641.992,1033.851" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[da964260897d31862023a421c2c3107a]
+link centrePlot to _cameraTubeStore--><path d="M208.157,523.81 C226.616,578.87 306.903,795.169 456,885.886 C509.423,918.391 579.644,933.656 630.22,940.776 " fill="none" id="centrePlot-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="635.36,941.481,626.9875,936.2943,630.4064,940.8011,625.8997,944.22,635.36,941.481" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[227c26e375aaba699cfa574f52e64c74]
+link centrePlot to _detectorStore--><path d="M205.162,523.98 C214.218,625.63 273.733,1285.854 295,1321.886 C366.505,1443.034 550.17,1469.8 641.818,1475.5 " fill="none" id="centrePlot-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="646.915,1475.801,638.166,1471.2782,641.9237,1475.5067,637.6952,1479.2644,646.915,1475.801" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[74fdfa913bad1fff3c80abc7bfb9ddc1]
+link centrePlot to legendBar--><path d="M205.028,497.88 C210.534,431.11 238.412,127.21 295,54.89 C300.877,47.38 309.253,41.79 317.872,37.66 " fill="none" id="centrePlot-&gt;legendBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="322.672,35.52,312.8232,35.5348,318.106,37.5576,316.0833,42.8404,322.672,35.52" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[774e2276e55e235112045360db7d3ce1]
+link centrePlot to _plotStore--><path d="M204.833,497.7 C209.223,432.77 231.906,147.8 295,91.89 C345.277,47.33 429.029,53.07 478.784,61.7 " fill="none" id="centrePlot-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="483.787,62.6,475.6333,57.0758,478.8653,61.7184,474.2227,64.9504,483.787,62.6" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1a433a4545821ffa8217ccd8ba4a348c]
+link centrePlot to _Plotter--><path d="M203.714,497.82 C203.281,447.36 207.966,262.46 295,150.89 C302.007,141.9 312.261,135.13 322.291,130.18 " fill="none" id="centrePlot-&gt;_Plotter" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="326.87,128.04,317.0233,128.2476,322.3448,130.1666,320.4258,135.488,326.87,128.04" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b4108886d4e8d8675452315385a60436]
+link centrePlot to _plotUtils--><path d="M203.395,497.61 C202.003,449.73 204.202,284.63 295,205.89 C348.76,159.26 568.501,151.36 657.653,150.09 " fill="none" id="centrePlot-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="662.822,150.03,653.7702,146.1486,657.8224,150.0957,653.8753,154.1479,662.822,150.03" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[423a0401b2042c3075ea042a9878ad62]
+link centrePlot to qrange--><path d="M204.722,497.67 C207.695,457.33 222.57,335.16 295,278.89 C350.961,235.41 439.556,239.31 486.987,245.4 " fill="none" id="centrePlot-&gt;qrange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="492.005,246.07,483.616,240.9101,487.0493,245.4059,482.5535,248.8392,492.005,246.07" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d3c519e5934b16dad37e5c35731f1ac7]
+link centrePlot to qvalue--><path d="M204.095,497.8 C205.175,454.12 214.957,312.29 295,243.89 C349.55,197.27 439.508,197.13 487.309,201.01 " fill="none" id="centrePlot-&gt;qvalue" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="492.362,201.45,483.7415,196.6869,487.3807,201.0177,483.0499,204.6569,492.362,201.45" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5fd5c8f6fa94b2c6867559c9cf8f5bff]
+link centrePlot to resultsBar--><path d="M218.314,523.32 C235.584,537.85 265.931,561.94 295,577.89 C303.029,582.29 312.078,586.25 320.652,589.59 " fill="none" id="centrePlot-&gt;resultsBar" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="325.356,591.38,318.3701,584.4376,320.6837,589.5997,315.5216,591.9132,325.356,591.38" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[756d14e4e3b21c420852f0cd1d65889d]
+link centrePlot to _resultsStore--><path d="M211.948,523.76 C226.323,546.26 258.555,593.26 295,623.89 C357.592,676.49 377.229,690.98 456,712.886 C519.819,730.636 596.884,729.79 646.04,726.612 " fill="none" id="centrePlot-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="651.3,726.256,642.0508,722.872,646.3114,726.5931,642.5902,730.8538,651.3,726.256" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[05038317e69905c92926fb2f22ce0fa2]
+link centrePlot to scatteringQuantities--><path d="M244.75,506.53 C315.862,500.39 466.353,493.89 585,532.89 C618.852,544.01 652.382,568.22 673.471,585.49 " fill="none" id="centrePlot-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="677.519,588.85,673.1509,580.0228,673.6725,585.6556,668.0398,586.1772,677.519,588.85" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[ec0ab718f7bd762d2aaf8ed7eabe2fb9]
+link centrePlot to svgEllipse--><path d="M234.819,519.9 C259.167,527.01 293.184,536.96 318.731,544.43 " fill="none" id="centrePlot-&gt;svgEllipse" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="323.722,545.89,316.2055,539.5259,318.9228,544.4874,313.9613,547.2046,323.722,545.89" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b38abf43950d7be6cbacc3ae0bbd0c79]
+link centrePlot to _types--><path d="M232.282,501.01 C250.043,495.33 273.567,488.78 295,485.89 C507.325,457.25 614.44,429.48 768,578.89 C953.803,759.66 983.883,1104.065 988.632,1194.621 " fill="none" id="centrePlot-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="988.887,1199.727,992.4345,1190.5392,988.6384,1194.7332,984.4444,1190.937,988.887,1199.727" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[892b893cb945f9a4f2c539e38f2932c4]
+link centrePlot to _unitRange--><path d="M219.603,498.73 C257.443,470.16 358.195,399.55 456,377.89 C511.977,365.49 528.866,366.22 585,377.89 C592.259,379.39 625.378,393.96 653.482,406.65 " fill="none" id="centrePlot-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="658.304,408.83,651.7525,401.4762,653.7484,406.7693,648.4554,408.7652,658.304,408.83" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[39eb32801e3d5d27aac83d8e87323799]
+link colourPicker to _plotUtils--><path d="M556.326,30.56 C565.994,34.02 576.236,38.44 585,43.89 C622.565,67.23 657.975,105 678.165,128.59 " fill="none" id="colourPicker-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="681.513,132.54,678.7274,123.0933,678.2729,128.7319,672.6344,128.2774,681.513,132.54" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1a17118c4acc28502d65b21d31e03b90]
+link dataSideBar to _beamlineconfigStore--><path d="M204.642,1112.946 C207.385,1152.729 221.666,1272.69 295,1321.886 C402.569,1394.048 565.481,1353.326 646.361,1325.737 " fill="none" id="dataSideBar-&gt;_beamlineconfigStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="651.569,1323.94,641.7564,1323.0959,646.8427,1325.5716,644.367,1330.658,651.569,1323.94" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[4ea2db8ec269957f0383dfe908e961d1]
+link dataSideBar to beamlineDialog--><path d="M213.045,1112.854 C229.119,1135.774 263.897,1184.805 295,1224.886 C309.449,1243.505 326.669,1264.189 338.857,1278.593 " fill="none" id="dataSideBar-&gt;beamlineDialog" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="342.155,1282.482,339.3852,1273.0306,338.9213,1278.6684,333.2835,1278.2045,342.155,1282.482" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[593a2f9d50681742633a4877e39128e4]
+link dataSideBar to beamProperties--><path d="M252.951,1103.765 C307.89,1108.118 397.158,1115.192 457.073,1119.939 " fill="none" id="dataSideBar-&gt;beamProperties" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="462.416,1120.363,453.7608,1115.6633,457.4317,1119.9673,453.1277,1123.6382,462.416,1120.363" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[841643dca18cbc05eab8cebc34e0ad25]
+link dataSideBar to beamstop--><path d="M253.297,1096.292 C313.187,1091.926 413.501,1084.613 472.388,1080.32 " fill="none" id="dataSideBar-&gt;beamstop" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="477.604,1079.94,468.3365,1076.6063,472.6173,1080.3043,468.9193,1084.585,477.604,1079.94" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c85f8075560e14db0462701e8121aacb]
+link dataSideBar to _beamstopStore--><path d="M234.418,1089.441 C251.945,1083.782 274.501,1077.104 295,1072.886 C414.622,1048.27 558.038,1043.294 636.69,1042.607 " fill="none" id="dataSideBar-&gt;_beamstopStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="641.777,1042.568,632.7464,1038.6375,636.7771,1042.6066,632.8081,1046.6373,641.777,1042.568" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0ed4eec2974998b2b49777ecb3d26043]
+link dataSideBar to cameraTube--><path d="M210.635,1086.98 C223.811,1062.401 255.447,1008.346 295,974.886 C352.87,925.931 435.803,891.778 482.984,874.925 " fill="none" id="dataSideBar-&gt;cameraTube" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="487.716,873.25,477.897,872.4831,483.0027,874.9187,480.567,880.0244,487.716,873.25" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e096a37c1e8dcccfd139f8c80b842b28]
+link dataSideBar to _cameraTubeStore--><path d="M222.074,1087.584 C239.92,1075.921 268.334,1058.632 295,1047.886 C408.73,1002.053 549.214,972.386 629.97,957.738 " fill="none" id="dataSideBar-&gt;_cameraTubeStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="635.202,956.795,625.635,954.4555,630.2814,957.6823,627.0546,962.3286,635.202,956.795" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2c520802993f4a3cc52bcfad8b6ffc66]
+link dataSideBar to detectorDialog--><path d="M204.372,1113.064 C206.392,1167.697 219.008,1380.652 295,1532.886 C304.862,1552.643 321.869,1571.232 335.181,1583.965 " fill="none" id="dataSideBar-&gt;detectorDialog" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="338.828,1587.397,335.0137,1578.3168,335.1862,1583.971,329.532,1584.1436,338.828,1587.397" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[de5213a13e684cdbe5b67250157e3f54]
+link dataSideBar to _detectorStore--><path d="M204.947,1113.133 C209.727,1175.86 233.457,1442.022 295,1490.886 C398.374,1572.964 568.492,1525.697 649.651,1495.72 " fill="none" id="dataSideBar-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="654.394,1493.951,644.5636,1493.3484,649.7092,1495.6983,647.3593,1500.844,654.394,1493.951" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0ccfb32cb233dd35566530626feb0a1e]
+link dataSideBar to _units--><path d="M207.712,1086.649 C217.254,1054.731 245.43,972.511 295,922.886 C351.894,865.929 377.765,858.865 456,839.886 C591.973,806.899 648.154,809.679 768,881.886 C805.975,904.765 836.742,947.54 852.972,973.394 " fill="none" id="dataSideBar-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="855.642,977.704,854.3042,967.9464,853.0095,973.4531,847.5028,972.1584,855.642,977.704" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[1304498b7e36290b0ef7968c5014725f]
+link detectorDialog to _detectorStore--><path d="M397.701,1591.011 C444.044,1579.359 521.173,1558.317 585,1532.886 C611.114,1522.481 639.366,1508.103 660.767,1496.522 " fill="none" id="detectorDialog-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="665.226,1494.095,655.4088,1494.8839,660.8343,1496.4852,659.233,1501.9107,665.226,1494.095" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5d956cd3429e9aeaaddc26d227784ecf]
+link detectorDialog to detectorTable--><path d="M394.716,1611.4364 C419.681,1618.3286 452.28,1627.3282 477.898,1634.4005 " fill="none" id="detectorDialog-&gt;detectorTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="482.924,1635.7881,475.314,1629.5361,478.1045,1634.4567,473.1838,1637.2472,482.924,1635.7881" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c56bd43eb580f38e664f438a9d1f36b0]
+link detectorDialog to presetManager--><path d="M413.182,1604.124 C500.932,1605.916 669.766,1596.031 768,1503.886 C822.828,1452.456 850.883,1363.564 860.999,1324.836 " fill="none" id="detectorDialog-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="862.254,1319.931,856.1471,1327.658,861.0141,1324.7748,863.8973,1329.6418,862.254,1319.931" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[37f2ca96678743cb428f74aecd6aa1f1]
+link detectorDialog to _types--><path d="M370.15,1614.5182 C388.054,1631.3348 421.291,1659.0288 456,1669.8859 C659.499,1733.5418 791.419,1735.079 925,1568.886 C966.443,1517.325 983.57,1307.974 988.157,1239.024 " fill="none" id="detectorDialog-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="988.491,1233.927,983.9133,1242.6473,988.1653,1238.9164,991.8963,1243.1684,988.491,1233.927" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[20bfe200a114777378bd73a15049fea5]
+link _detectorStore to presetManager--><path d="M744.708,1459.717 C752.937,1455.569 761.069,1450.636 768,1444.886 C809.602,1410.368 841.635,1353.972 856.459,1324.758 " fill="none" id="_detectorStore-&gt;presetManager" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="858.858,1319.97,851.2506,1326.2252,856.6185,1324.4404,858.4032,1329.8084,858.858,1319.97" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[47685ed1073a677d32df603d637da26a]
+link _detectorStore to _types--><path d="M746.15,1473.257 C797.163,1466.927 876.512,1449.555 925,1401.886 C970.659,1356.997 984.045,1278.095 987.932,1239.472 " fill="none" id="_detectorStore-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="988.44,1234.074,983.6167,1242.661,987.9729,1239.0521,991.5817,1243.4083,988.44,1234.074" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[759abe2480fa291aedf7b67b32a4022b]
+link _detectorStore to _units--><path d="M707.211,1459.725 C721.861,1433.326 749.828,1380.871 768,1333.886 C812.941,1217.689 848.027,1072.087 860.541,1017.195 " fill="none" id="_detectorStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="861.681,1012.171,855.7874,1020.0618,860.5738,1017.0469,863.5888,1021.8333,861.681,1012.171" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[5b2d0942037cb08013c24b055e3ca1f5]
+link detectorTable to _detectorStore--><path d="M535.153,1632.6247 C565.3,1603.345 637.744,1532.983 674.03,1497.739 " fill="none" id="detectorTable-&gt;_detectorStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="677.848,1494.03,668.6058,1497.4333,674.2621,1497.5145,674.181,1503.1707,677.848,1494.03" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[9ab77d2b3e6b24773d077a36433313b6]
+link detectorTable to _types--><path d="M571.987,1640.1948 C660.991,1627.1595 844.042,1586.236 925,1464.886 C973.498,1392.191 985.545,1285.043 988.526,1239.113 " fill="none" id="detectorTable-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="988.832,1234.081,984.2941,1242.8221,988.5291,1239.0718,992.2794,1243.3068,988.832,1234.081" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[08824a3ba6720dad2419584cda81b6e8]
+link legendBar to colourPicker--><path d="M398.901,25.33 C418.462,24.61 441.962,23.74 463.001,22.97 " fill="none" id="legendBar-&gt;colourPicker" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="468.01,22.78,458.8694,19.1126,463.0134,22.9633,459.1627,27.1072,468.01,22.78" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[859e2ca28cb76f44f0370c60baffe4d6]
+link legendBar to _plotStore--><path d="M388.315,35.47 C414.132,42.44 450.705,52.32 478.679,59.87 " fill="none" id="legendBar-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="483.798,61.25,476.1554,55.0379,478.9716,59.9439,474.0656,62.7601,483.798,61.25" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[a7ba3c821d48259f80a967b14cc45774]
+link <b>main</b> to app--><path d="M58.5,1066.916 C58.5,1071.732 58.5,1076.548 58.5,1081.363 " fill="none" id="&lt;b&gt;main&lt;/b&gt;-&gt;app" style="stroke: #000000; stroke-width: 1.0;"/><polygon fill="#000000" points="58.5,1086.589,62.5,1077.589,58.5,1081.589,54.5,1077.589,58.5,1086.589" style="stroke: #000000; stroke-width: 1.0;"/><!--MD5=[82c1f8e9a20de97d7eabc92ecd792005]
+link _Plotter to _plotStore--><path d="M384.151,110.74 C410.081,103.11 449.175,91.6 478.691,82.9 " fill="none" id="_Plotter-&gt;_plotStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="483.713,81.42,473.9498,80.1241,478.9165,82.8318,476.2087,87.7985,483.713,81.42" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[49d95620f04899f6aa063a5444cfa81d]
+link _Plotter to _plotUtils--><path d="M384.242,121.42 C444.809,126.96 588.949,140.14 657.726,146.43 " fill="none" id="_Plotter-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="662.945,146.91,654.3465,142.1074,657.9658,146.4549,653.6183,150.0742,662.945,146.91" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f66ddaf772cc78b11c3af50aec607105]
+link _plotUtils to _numericRange--><path d="M730.326,160.22 C742.51,164.63 756.223,170.29 768,176.89 C795.367,192.22 823.428,214.65 842.377,230.98 " fill="none" id="_plotUtils-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="846.516,234.58,842.348,225.6566,842.7425,231.2996,837.0994,231.6941,846.516,234.58" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[7c97b5a79daef19f1851810c5c9628a2]
+link presetManager to _types--><path d="M894.676,1293.53 C904.553,1288.574 915.592,1282.474 925,1275.886 C941.11,1264.605 957.439,1249.626 969.636,1237.583 " fill="none" id="presetManager-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="973.284,1233.948,964.0859,1237.4687,969.7428,1237.4778,969.7336,1243.1347,973.284,1233.948" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[0596d30483a882cc19ac5c32929d0c5a]
+link qrange to _numericRange--><path d="M551.127,250.97 C608.82,251.14 737.02,251.51 810.648,251.73 " fill="none" id="qrange-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="815.854,251.74,806.8655,247.7143,810.854,251.7257,806.8426,255.7143,815.854,251.74" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[157ef11e6a0ba65ccbc9363f896c36c5]
+link qrange to _qspace--><path d="M548.493,256.14 C610.163,268.15 761.363,297.6 830.261,311.02 " fill="none" id="qrange-&gt;_qspace" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="835.476,312.04,827.4051,306.3955,830.568,311.0855,825.8779,314.2483,835.476,312.04" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c36a8607e6475574cee7fb0a79f5dc5f]
+link qrange to _ray--><path d="M546.801,244.05 C580.62,234.92 640.066,218.86 672.612,210.07 " fill="none" id="qrange-&gt;_ray" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="677.597,208.72,667.8653,207.2053,672.77,210.0239,669.9515,214.9286,677.597,208.72" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[781606cfc6e5fc380a20c156d0bd8efa]
+link qrange to _types--><path d="M540.801,260.63 C620.754,301.01 921.958,453.35 925,457.89 C967.057,520.59 985.407,1075.45 988.878,1194.469 " fill="none" id="qrange-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="989.032,1199.804,992.7707,1190.6923,988.8877,1194.8061,984.774,1190.9232,989.032,1199.804" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[62e662b571a1e13086db8d9d47736400]
+link _qspace to _types--><path d="M897.656,333.84 C908.116,340.97 918.773,350.39 925,361.89 C965.74,437.09 985.317,1066.407 988.893,1194.271 " fill="none" id="_qspace-&gt;_types" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="989.042,1199.637,992.7911,1190.5296,988.9034,1194.6389,984.7941,1190.7513,989.042,1199.637" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[2b7bdd1805499b0002c364951c568ca3]
+link qvalue to _plotUtils--><path d="M544.606,197.58 C573.506,188.45 623.371,172.69 657.824,161.79 " fill="none" id="qvalue-&gt;_plotUtils" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="662.791,160.22,653.0042,159.1166,658.0232,161.726,655.4137,166.745,662.791,160.22" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[cc578e726c93036f57cbbbd44df52c7a]
+link qvalue to _ray--><path d="M549.843,204.72 C584.072,204.53 640.973,204.2 672.572,204.02 " fill="none" id="qvalue-&gt;_ray" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="677.793,203.99,668.7703,200.0415,672.7931,204.0186,668.816,208.0414,677.793,203.99" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e3d73fafa21a9812183994b7122589ba]
+link rangeDiagram to _unitRange--><path d="M577.512,424.53 C602.081,424.81 630.441,425.14 653.199,425.4 " fill="none" id="rangeDiagram-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="658.263,425.46,649.3093,421.3574,653.2633,425.4029,649.2179,429.3569,658.263,425.46" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e5ff59a501fdb35405cbd1ecb801cb13]
+link rangeTable to _resultsStore--><path d="M547.174,659.66 C574.205,671 617.305,689.08 650.096,702.84 " fill="none" id="rangeTable-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="654.856,704.83,648.1101,697.6541,650.2469,702.8919,645.0091,705.0287,654.856,704.83" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[d799cd6b21528669722a26ecffb8ffa9]
+link rangeTable to scatteringQuantities--><path d="M555.877,640.19 C580.585,633.94 614.363,625.4 642.507,618.29 " fill="none" id="rangeTable-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="647.693,616.97,637.9878,615.2937,642.845,618.1934,639.9453,623.0506,647.693,616.97" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[da8458e95ab223cabcc393d0ddb71351]
+link rangeTable to _unitRange--><path d="M535.048,636.28 C548.375,623.6 568.994,603.2 585,583.89 C623.273,537.7 662.105,478.76 681.962,447.55 " fill="none" id="rangeTable-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="684.752,443.15,676.5601,448.6174,682.0789,447.3755,683.3208,452.8943,684.752,443.15" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[bf1fd359bb09bada2fc721f388a83091]
+link rangeTable to _units--><path d="M565.528,644.54 C619.8,641.7 711.732,645.48 768,694.89 C852.32,768.919 864.123,916.617 865.476,972.64 " fill="none" id="rangeTable-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="865.576,977.77,869.4004,968.694,865.4789,972.7709,861.4019,968.8494,865.576,977.77" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[738392c8b93e1f7abe76e3831bf71f28]
+link _ray to _numericRange--><path d="M715.161,208.93 C737.725,215.38 777.82,226.83 810.931,236.29 " fill="none" id="_ray-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="815.763,237.68,808.2099,231.3593,810.9558,236.3051,806.01,239.0509,815.763,237.68" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[b6bb703ad39547b021a8c4ecd01eb7ab]
+link resultsBar to MessageDiagram--><path d="M389.094,592.29 C412.708,586.06 445.016,577.54 471.565,570.53 " fill="none" id="resultsBar-&gt;MessageDiagram" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="476.452,569.24,466.7288,567.6716,471.6179,570.5172,468.7723,575.4062,476.452,569.24" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[6a36f5b4999f4480cfc82ddf050159b2]
+link resultsBar to _numericRange--><path d="M392.253,593.57 C401.139,590.16 409.867,585.17 416,577.89 C474.375,508.53 395.222,445.14 456,377.89 C503.94,324.84 710.829,280.4 810.89,261.56 " fill="none" id="resultsBar-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="815.865,260.63,806.2826,258.3544,810.9504,261.5501,807.7547,266.2178,815.865,260.63" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[e685bebbe24c6d328514b7c19be7463a]
+link resultsBar to rangeDiagram--><path d="M388.976,592.38 C398.331,588.9 408.125,584.18 416,577.89 C440.57,558.26 487.861,479 508.927,442.48 " fill="none" id="resultsBar-&gt;rangeDiagram" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="511.602,437.83,503.6403,443.6275,509.1038,442.1612,510.5702,447.6247,511.602,437.83" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[81dde4b43ce4c99d877ce2d82a86b82e]
+link resultsBar to rangeTable--><path d="M387.159,609.91 C414.271,617.9 453.882,629.56 482.698,638.05 " fill="none" id="resultsBar-&gt;rangeTable" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="487.587,639.49,480.0879,633.1054,482.7916,638.0743,477.8227,640.778,487.587,639.49" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[993f8bb94a42bb540980ca6aef589b54]
+link resultsBar to _resultsStore--><path d="M369.863,613.24 C387.977,629.28 421.982,656.99 456,671.89 C518.444,699.23 596.721,711.943 646.439,717.62 " fill="none" id="resultsBar-&gt;_resultsStore" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="651.458,718.18,642.957,713.2068,646.4888,717.6256,642.07,721.1575,651.458,718.18" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[f512c4e3e8f7ee8d0ef86666be1ccb3a]
+link resultsBar to scatteringQuantities--><path d="M399.779,601.4 C455.187,602.05 552.108,603.19 619.839,603.99 " fill="none" id="resultsBar-&gt;scatteringQuantities" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="625.072,604.05,616.1195,599.9449,620.0723,603.9914,616.0258,607.9443,625.072,604.05" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[4548d82b079e5330e8b9bef202663786]
+link resultsBar to _unitRange--><path d="M392.14,593.47 C401.026,590.06 409.781,585.1 416,577.89 C468.945,516.47 392.691,450.55 456,399.89 C485.539,376.25 592.939,399 653.399,414.39 " fill="none" id="resultsBar-&gt;_unitRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="658.384,415.67,650.6608,409.5583,653.5409,414.4271,648.6722,417.3072,658.384,415.67" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[c66619fc71b08ccb6dfb96dbbab0fb64]
+link resultsBar to _units--><path d="M364.359,613.76 C379.274,637.08 413.98,686.39 456,712.886 C578.074,789.869 656.774,710.923 768,802.886 C822.872,848.255 850.062,932.383 860.389,972.491 " fill="none" id="resultsBar-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="861.679,977.62,863.3646,967.9165,860.4603,972.7708,855.6059,969.8664,861.679,977.62" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[95ec0a6772fe0d0910ec9af1a6eb4857]
+link _resultsStore to _units--><path d="M739.23,738.985 C749.634,744.752 760.07,752.027 768,760.886 C825.519,825.139 852.108,928.125 861.417,972.905 " fill="none" id="_resultsStore-&gt;_units" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="862.417,977.818,864.5414,968.201,861.4197,972.9185,856.7022,969.7967,862.417,977.818" style="stroke: #000000; stroke-width: 0.5;"/><!--MD5=[51d0e88da8530ca185511c1bba80cc5c]
+link _unitRange to _numericRange--><path d="M715.54,408.76 C730.379,394.27 751.565,372.6 768,351.89 C788.152,326.49 785.255,313.99 808,290.89 C814.783,284 822.956,277.6 830.983,272.06 " fill="none" id="_unitRange-&gt;_numericRange" style="stroke: #000000; stroke-width: 0.5;"/><polygon fill="#000000" points="835.417,269.07,825.7157,270.7686,831.2666,271.8583,830.177,277.4092,835.417,269.07" style="stroke: #000000; stroke-width: 0.5;"/><script type="text/plantuml"><![CDATA[MD5=[06dd516db168c59396aa887c4a9ec641]
 @startuml
 
 scale max 1920 width
@@ -134,6 +144,7 @@ skinparam component {
 (app)
 (basicAppBar)
 rectangle "beamlineconfigStore" as _beamlineconfigStore
+(beamlineDialog)
 (BeamlineTable)
 (beamProperties)
 (beamstop)
@@ -153,8 +164,7 @@ rectangle "numericRange" as _numericRange
 rectangle "plotStore" as _plotStore
 rectangle "Plotter" as _Plotter
 rectangle "plotUtils" as _plotUtils
-(presetDialog)
-rectangle "presetManager" as _presetManager
+(presetManager)
 (qrange)
 rectangle "qspace" as _qspace
 (qvalue)
@@ -164,7 +174,6 @@ rectangle "ray" as _ray
 (resultsBar)
 rectangle "resultsStore" as _resultsStore
 (scatteringQuantities)
-(sideMenu)
 (svgEllipse)
 rectangle "types" as _types
 rectangle "unitRange" as _unitRange
@@ -176,22 +185,33 @@ rectangle "units" as _units
 (app) --> (basicAppBar)
 (app) --> (centrePlot)
 (app) --> (dataSideBar)
-(basicAppBar) --> (sideMenu)
-_beamlineconfigStore --> _presetManager
+(basicAppBar) --> _beamlineconfigStore
+(basicAppBar) --> _beamstopStore
+(basicAppBar) --> _cameraTubeStore
+(basicAppBar) --> _detectorStore
+(basicAppBar) --> (presetManager)
+(basicAppBar) --> _units
+_beamlineconfigStore --> (presetManager)
 _beamlineconfigStore --> _types
 _beamlineconfigStore --> _units
-(BeamlineTable) --> _presetManager
+(beamlineDialog) --> _beamlineconfigStore
+(beamlineDialog) --> (BeamlineTable)
+(beamlineDialog) --> (presetManager)
+(beamlineDialog) --> _types
+(BeamlineTable) --> _beamlineconfigStore
+(BeamlineTable) --> _types
 (beamProperties) --> _beamlineconfigStore
 (beamProperties) --> _units
 (beamstop) --> _beamstopStore
 (beamstop) --> _detectorStore
+(beamstop) --> _types
 (beamstop) --> _units
-_beamstopStore --> _presetManager
+_beamstopStore --> (presetManager)
 _beamstopStore --> _types
 _beamstopStore --> _units
 (cameraTube) --> _cameraTubeStore
 (cameraTube) --> _units
-_cameraTubeStore --> _presetManager
+_cameraTubeStore --> (presetManager)
 _cameraTubeStore --> _types
 _cameraTubeStore --> _units
 (centrePlot) --> _beamlineconfigStore
@@ -212,6 +232,7 @@ _cameraTubeStore --> _units
 (centrePlot) --> _unitRange
 (colourPicker) --> _plotUtils
 (dataSideBar) --> _beamlineconfigStore
+(dataSideBar) --> (beamlineDialog)
 (dataSideBar) --> (beamProperties)
 (dataSideBar) --> (beamstop)
 (dataSideBar) --> _beamstopStore
@@ -219,15 +240,15 @@ _cameraTubeStore --> _units
 (dataSideBar) --> _cameraTubeStore
 (dataSideBar) --> (detectorDialog)
 (dataSideBar) --> _detectorStore
-(dataSideBar) --> (presetDialog)
-(dataSideBar) --> _presetManager
 (dataSideBar) --> _units
 (detectorDialog) --> _detectorStore
 (detectorDialog) --> (detectorTable)
-_detectorStore --> _presetManager
+(detectorDialog) --> (presetManager)
+(detectorDialog) --> _types
+_detectorStore --> (presetManager)
 _detectorStore --> _types
 _detectorStore --> _units
-(detectorTable) --> _presetManager
+(detectorTable) --> _detectorStore
 (detectorTable) --> _types
 (legendBar) --> (colourPicker)
 (legendBar) --> _plotStore
@@ -235,8 +256,7 @@ _detectorStore --> _units
 _Plotter --> _plotStore
 _Plotter --> _plotUtils
 _plotUtils --> _numericRange
-(presetDialog) --> (BeamlineTable)
-_presetManager --> _types
+(presetManager) --> _types
 (qrange) --> _numericRange
 (qrange) --> _qspace
 (qrange) --> _ray
diff --git a/package-lock.json b/package-lock.json
index 0a18345..3ad23e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,11 @@
         "@mui/system": "^5.15.9",
         "@mui/x-data-grid": "^5.17.4",
         "@react-three/fiber": "8.16.2",
-        "formik": "^2.4.5",
         "mathjs": "^12.1.0",
         "react": "^18.2.0",
         "react-color": "^2.19.3",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.51.4",
         "three": "^0.158.0",
         "zustand": "^4.4.6"
       },
@@ -36,7 +36,7 @@
         "eslint-plugin-react": "^7.33.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
-        "typescript": "^5.0.2",
+        "typescript": "^5.4.5",
         "vite": "^4.5.1",
         "vitest": "^1.5.1"
       }
@@ -1904,15 +1904,6 @@
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
       "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
-      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1936,17 +1927,6 @@
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
       "dev": true
     },
-    "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -3641,14 +3621,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -4472,30 +4444,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/formik": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz",
-      "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://opencollective.com/formik"
-        }
-      ],
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.1",
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.4.tgz",
@@ -6826,10 +6774,20 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    "node_modules/react-hook-form": {
+      "version": "7.51.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz",
+      "integrity": "sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
     },
     "node_modules/react-icons": {
       "version": "5.0.1",
@@ -7832,11 +7790,6 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tinybench": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.7.0.tgz",
@@ -7969,11 +7922,6 @@
         "strip-bom": "^3.0.0"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -8131,14 +8079,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
diff --git a/package.json b/package.json
index 02348be..9d83f89 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
-    "check-types": "tsc",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview --port 3000",
     "test": "npx vitest",
@@ -23,11 +22,11 @@
     "@mui/system": "^5.15.9",
     "@mui/x-data-grid": "^5.17.4",
     "@react-three/fiber": "8.16.2",
-    "formik": "^2.4.5",
     "mathjs": "^12.1.0",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.4",
     "three": "^0.158.0",
     "zustand": "^4.4.6"
   },
@@ -43,7 +42,7 @@
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.4.5",
     "vite": "^4.5.1",
     "vitest": "^1.5.1"
   }
diff --git a/src/app.tsx b/src/app.tsx
index a84276a..38da76f 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,20 +1,18 @@
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import DataSideBar from "./data-entry/dataSideBar";
 import CentrePlot from "./plot/centrePlot";
 import BasicAppBar from "./basicAppBar";
 
 export default function App(): JSX.Element {
   return (
-    <Box>
+    <>
       <BasicAppBar />
       <Stack direction={"row"} spacing={1} margin={1}>
-        <Box>
-          <DataSideBar />
-        </Box>
+        <DataSideBar />
         <Stack direction={"column"} spacing={1} flexGrow={1}>
           <CentrePlot />
         </Stack>
       </Stack>
-    </Box>
+    </>
   );
 }
diff --git a/src/basicAppBar.tsx b/src/basicAppBar.tsx
index 3f93213..fad86e7 100644
--- a/src/basicAppBar.tsx
+++ b/src/basicAppBar.tsx
@@ -1,18 +1,61 @@
 import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import { useDetectorStore } from "./data-entry/detectorStore";
+import { presetConfigRecord } from "./presets/presetManager";
+import { Autocomplete, TextField } from "@mui/material";
+import { useBeamlineConfigStore } from "./data-entry/beamlineconfigStore";
+import { useState } from "react";
+import { useBeamstopStore } from "./data-entry/beamstopStore";
+import { useCameraTubeStore } from "./data-entry/cameraTubeStore";
+import { LengthUnits } from "./utils/units";
 
 export default function BasicAppBar(): JSX.Element {
+  const [preset, setPreset] = useState<string>(
+    Object.keys(presetConfigRecord)[0],
+  );
+  const detectorStore = useDetectorStore();
+  const beamlineConfigStore = useBeamlineConfigStore();
+  const beamstopStore = useBeamstopStore();
+  const cameraTubeStore = useCameraTubeStore();
+
+  const handlePreset = (preset: string) => {
+    const { beamstop, cameraTube, detector, beamline } =
+      presetConfigRecord[preset];
+    detectorStore.updateDetector(detector);
+    beamstopStore.updateBeamstop(beamstop);
+    cameraTubeStore.updateCameraTube(cameraTube);
+    beamlineConfigStore.updateBeamline(beamline);
+    beamstopStore.updateDiameter(
+      beamlineConfigStore.beamlineRecord[beamline].beamstopDiameter,
+      LengthUnits.millimetre,
+    );
+    cameraTubeStore.updateDiameter(
+      beamlineConfigStore.beamlineRecord[beamline].cameratubeDiameter,
+      LengthUnits.millimetre,
+    );
+    setPreset(preset);
+  };
+
   return (
-    <Box >
-      <AppBar position="static">
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Dedi Web
-          </Typography>
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Dedi Web
+        </Typography>
+        <Autocomplete
+          size="small"
+          options={Object.keys(presetConfigRecord)}
+          value={preset}
+          sx={{ width: 300, color: "white" }}
+          renderInput={(params) => (
+            <TextField {...params} label="preset" sx={{ color: "black" }} />
+          )}
+          onChange={(_, value) => {
+            value ? handlePreset(value) : {};
+          }}
+        />
+      </Toolbar>
+    </AppBar>
   );
 }
diff --git a/src/calculations/numericRange.ts b/src/calculations/numericRange.ts
index d3817bb..1c570ea 100644
--- a/src/calculations/numericRange.ts
+++ b/src/calculations/numericRange.ts
@@ -20,9 +20,9 @@ export default class NumericRange {
 
   /**
    * Checks if the input is contained in this range.
-   * 
-   * @param value - Input number 
-   * @returns 
+   *
+   * @param value - Input number
+   * @returns
    */
   containsValue(value: number): boolean {
     return value >= this.min && value <= this.max;
@@ -71,19 +71,19 @@ export default class NumericRange {
   applyInPlace(func: (value: number) => number): NumericRange {
     this.min = func(this.min);
     this.max = func(this.max);
-    
+
     if (this.min > this.max) {
       const temp = this.max;
       this.max = this.min;
       this.min = temp;
     }
-    
+
     return this;
   }
 
   /**
    * Returns a string representation of this range.
-   * @returns 
+   * @returns
    */
   toString(): string {
     return `(min:${this.min}, max:${this.max})`;
@@ -91,8 +91,8 @@ export default class NumericRange {
 
   /**
    * Check if this range is equal to the input range
-   * @param other Another NumericRange 
-   * @returns 
+   * @param other Another NumericRange
+   * @returns
    */
   equals(other: NumericRange): boolean {
     return this.min === other.min && this.max === other.max;
diff --git a/src/calculations/qrange.ts b/src/calculations/qrange.ts
index 1050725..f5a6542 100644
--- a/src/calculations/qrange.ts
+++ b/src/calculations/qrange.ts
@@ -4,9 +4,9 @@ import QSpace, { DetectorProperties } from "../calculations/qspace";
 import { Ray } from "../calculations/ray";
 import {
   BeamlineConfig,
-  Beamstop,
-  CircularDevice,
-  Detector,
+  AppBeamstop,
+  AppCircularDevice,
+  AppDetector,
 } from "../utils/types";
 import NumericRange from "./numericRange";
 
@@ -25,16 +25,16 @@ const defaultReturn = {
 // I created blocks in it with comments (not the only way to do this)
 /**
  * Computes the qrange given detector, beamstop, cameraTube, and Beamproperties
- * @param detector 
- * @param beamstop 
- * @param cameraTube 
- * @param beamProperties 
- * @returns 
+ * @param detector
+ * @param beamstop
+ * @param cameraTube
+ * @param beamProperties
+ * @returns
  */
 export function computeQrange(
-  detector: Detector,
-  beamstop: Beamstop,
-  cameraTube: CircularDevice,
+  detector: AppDetector,
+  beamstop: AppBeamstop,
+  cameraTube: AppCircularDevice,
   beamProperties: BeamlineConfig,
 ): {
   ptMin: Vector2;
@@ -131,16 +131,16 @@ export function computeQrange(
   const visibleQMax = qspace.qFromPixelPosition(ptMax);
 
   // get the min
-  detProps.origin.z = beamProperties.minCameraLength.toSI().toNumber();
+  detProps.origin.z = beamProperties.beamline.minCameraLength.toSI().toNumber();
   qspace.setDiffractionCrystalEnviroment(
-    beamProperties.minWavelength.toSI().toNumber(),
+    beamProperties.beamline.minWavelength.toSI().toNumber(),
   );
   const fullQMin = qspace.qFromPixelPosition(ptMax);
 
   // get the max
-  detProps.origin.z = beamProperties.maxCameraLength.toSI().toNumber();
+  detProps.origin.z = beamProperties.beamline.maxCameraLength.toSI().toNumber();
   qspace.setDiffractionCrystalEnviroment(
-    beamProperties.maxWavelength.toSI().toNumber(),
+    beamProperties.beamline.maxWavelength.toSI().toNumber(),
   );
   const fullQMax = qspace.qFromPixelPosition(ptMin);
 
@@ -163,9 +163,9 @@ export function computeQrange(
  */
 function getRightUnits(
   beamProperties: BeamlineConfig,
-  beamstop: Beamstop,
-  detector: Detector,
-  cameraTube: CircularDevice,
+  beamstop: AppBeamstop,
+  detector: AppDetector,
+  cameraTube: AppCircularDevice,
 ) {
   const cameraLength = mathjs.unit(beamProperties.cameraLength ?? NaN, "m");
   const clearanceWidth = mathjs.add(
diff --git a/src/calculations/qspace.ts b/src/calculations/qspace.ts
index a70e127..7c383fe 100644
--- a/src/calculations/qspace.ts
+++ b/src/calculations/qspace.ts
@@ -1,7 +1,7 @@
 import { Vector3, Vector2 } from "three";
-import { Detector } from "../utils/types";
+import { AppDetector } from "../utils/types";
 
-export interface DetectorProperties extends Detector {
+export interface DetectorProperties extends AppDetector {
   origin: Vector3;
   beamVector: Vector3;
 }
diff --git a/src/calculations/unitRange.ts b/src/calculations/unitRange.ts
index 04428e8..40631ff 100644
--- a/src/calculations/unitRange.ts
+++ b/src/calculations/unitRange.ts
@@ -28,10 +28,10 @@ export default class UnitRange {
 
   /**
    * Creates a new UnitRange with the units converted to the input unit string.
-   * 
-   * @remarks To learn about the unit strings refer to 
+   *
+   * @remarks To learn about the unit strings refer to
    * https://mathjs.org/docs/datatypes/units.html
-   * 
+   *
    * @param units Unit name to convert too
    * @returns Unit range object with converted units
    */
@@ -109,16 +109,16 @@ export default class UnitRange {
       this.max = this.min;
       this.min = temp;
     }
-    
+
     return this;
   }
 
   /**
    * Creates a UnitRange from a Numeric range
-   * 
-   * @remarks To learn about the unit strings refer to 
+   *
+   * @remarks To learn about the unit strings refer to
    * https://mathjs.org/docs/datatypes/units.html
-   * 
+   *
    * @param range Input NumericRange
    * @param units Unit name of range
    * @returns
@@ -135,17 +135,16 @@ export default class UnitRange {
 
   /**
    * Returns a string representation of this UnitRange.
-   * @returns 
+   * @returns
    */
   toString(): string {
     return `(min:${this.min.toString()}, max:${this.max.toString()})`;
   }
 
-  
   /**
    * Check if this range is equal to the input range
-   * @param other Another UnitRange 
-   * @returns 
+   * @param other Another UnitRange
+   * @returns
    */
   equals(other: UnitRange): boolean {
     const result =
diff --git a/src/data-entry/beamProperties.tsx b/src/data-entry/beamProperties.tsx
index e4b2c2e..e3415bc 100644
--- a/src/data-entry/beamProperties.tsx
+++ b/src/data-entry/beamProperties.tsx
@@ -8,6 +8,7 @@ import {
   InputLabel,
   SelectChangeEvent,
   InputAdornment,
+  Divider,
 } from "@mui/material";
 import {
   AngleUnits,
@@ -23,7 +24,7 @@ import { unit } from "mathjs";
 // todo consider splitting this into components
 /**
  * Component with data entry inputs for the Beamline.
- * @returns 
+ * @returns
  */
 export default function BeampropertiesDataEntry() {
   const beamlineConfig = useBeamlineConfigStore();
@@ -83,6 +84,7 @@ export default function BeampropertiesDataEntry() {
   return (
     <Stack spacing={2}>
       <Typography variant="h6">Beam properties</Typography>
+      <Divider />
       {/* ENERGY */}
       <Stack direction={"row"} spacing={1}>
         <TextField
@@ -134,10 +136,12 @@ export default function BeampropertiesDataEntry() {
         </FormControl>
       </Stack>
       <Typography>
-        Minimum allowed wavelength: {beamlineConfig.minWavelength.toString()}
+        Minimum allowed wavelength: 
+        {" " + beamlineConfig.beamline.minWavelength.toString()}
       </Typography>
       <Typography>
-        Maximum allowed wavelength: {beamlineConfig.maxWavelength.toString()}
+        Maximum allowed wavelength: 
+        {" " + beamlineConfig.beamline.maxWavelength.toString()}
       </Typography>
       <Stack direction="row" spacing={1}>
         <TextField
@@ -147,9 +151,9 @@ export default function BeampropertiesDataEntry() {
           value={beamlineConfig.cameraLength ?? ""}
           InputProps={{
             inputProps: {
-              max: beamlineConfig.maxCameraLength.toNumber(),
-              min: beamlineConfig.minCameraLength.toNumber(),
-              step: beamlineConfig.cameraLengthStep.toNumber(),
+              max: beamlineConfig.beamline.maxCameraLength.toNumber(),
+              min: beamlineConfig.beamline.minCameraLength.toNumber(),
+              step: beamlineConfig.beamline.cameraLengthStep.toNumber(),
             },
             endAdornment: <InputAdornment position="end">m</InputAdornment>,
           }}
diff --git a/src/data-entry/beamlineconfigStore.ts b/src/data-entry/beamlineconfigStore.ts
index 361642d..f8e3811 100644
--- a/src/data-entry/beamlineconfigStore.ts
+++ b/src/data-entry/beamlineconfigStore.ts
@@ -1,87 +1,125 @@
-import { BeamlineConfig } from "../utils/types";
+import { AppBeamline } from "../utils/types";
 import { create } from "zustand";
 import { AngleUnits, EnergyUnits, WavelengthUnits } from "../utils/units";
-import { 
-    presetList,
-    defaultConfig,
-    AppDataFormat } from "../presets/presetManager";
+import { beamlineRecord, defaultConfig } from "../presets/presetManager";
 import { Unit, unit } from "mathjs";
 import { wavelength2EnergyConverter } from "../utils/units";
 
-export interface BeamlineConfigStore extends BeamlineConfig {
-  preset: string | null;
-  presetList: Record<string, AppDataFormat>;
+export interface BeamlineConfigStore {
+  beamlineName: string;
+  beamline: AppBeamline;
+  beamlineRecord: Record<string, AppBeamline>;
+
   energy: Unit;
   userEnergy: number | null;
+
+  wavelength: Unit;
   userWavelength: number | null;
+
+  angle: Unit;
   userAngle: number | null;
-  updateAngle: (newAngle: number | null, newUnits: AngleUnits) => void;
-  updateAngleUnits: (newUnits: AngleUnits) => void;
-  updateCameraLength: (newLength: number | null) => void;
+
+  cameraLength: number | null;
+
+  updateBeamline: (newBeamline: string) => void;
+  addNewBeamline: (name: string, beamline: AppBeamline) => void;
+
+  updateEnergy: (newEnergy: number | null, newUnits: EnergyUnits) => void;
+  updateEnergyUnits: (newUnits: EnergyUnits) => void;
   updateWavelength: (
     newWavelength: number | null,
     newUnits: WavelengthUnits,
   ) => void;
   updateWavelengthUnits: (newUnits: WavelengthUnits) => void;
-  updateEnergy: (newEnergy: number | null, newUnits: EnergyUnits) => void;
-  updateEnergyUnits: (newUnits: EnergyUnits) => void;
+  updateAngle: (newAngle: number | null, newUnits: AngleUnits) => void;
+  updateAngleUnits: (newUnits: AngleUnits) => void;
+  updateCameraLength: (newLength: number | null) => void;
   update: (newConfig: Partial<BeamlineConfigStore>) => void;
-  addPreset: (name: string, preset: AppDataFormat) => void;
 }
 
 /**
  * Zustand store for information relating to the beamline
  */
 export const useBeamlineConfigStore = create<BeamlineConfigStore>((set) => ({
-  preset: Object.keys(presetList)[0],
-  presetList: presetList,
-  ...defaultConfig,
+  beamline: beamlineRecord[defaultConfig.beamline],
+  beamlineName: defaultConfig.beamline,
+  beamlineRecord: beamlineRecord,
+
+  energy: wavelength2EnergyConverter(defaultConfig.wavelength).to("keV"),
   userEnergy: wavelength2EnergyConverter(defaultConfig.wavelength)
     .to("keV")
     .toNumber(),
+
+  wavelength: defaultConfig.wavelength,
   userWavelength: defaultConfig.wavelength.toNumber(),
+
+  angle: defaultConfig.angle,
   userAngle: defaultConfig.angle.toNumber(),
-  energy: wavelength2EnergyConverter(defaultConfig.wavelength).to("keV"),
+
+  cameraLength: defaultConfig.cameraLength,
+
+  updateBeamline: (newBeamline: string) =>
+    set((state: BeamlineConfigStore) => ({
+      beamline: state.beamlineRecord[newBeamline],
+      beamlineName: newBeamline,
+    })),
+
+  addNewBeamline: (name: string, beamline: AppBeamline) => {
+    {
+      set((state: BeamlineConfigStore) => ({
+        beamlineRecord: { ...state.beamlineRecord, [name]: beamline },
+      }));
+    }
+  },
+
   updateAngle: (newAngle: number | null, newUnits: string) =>
     set({
       angle: unit(newAngle ?? NaN, newUnits),
       userAngle: newAngle,
     }),
+
   updateAngleUnits: (newUnits: AngleUnits) =>
     set((state) => ({
       angle: state.angle.to(newUnits),
       userAngle: state.angle.to(newUnits).toNumber(),
     })),
+
   updateCameraLength: (newLength: number | null) =>
     set({ cameraLength: newLength }),
+
   updateWavelength: (newWavelength: number | null, newUnits: WavelengthUnits) =>
     set((state) => ({
       wavelength: unit(newWavelength ?? NaN, newUnits),
       userWavelength: newWavelength,
-      minWavelength: state.minWavelength.to(newUnits),
-      maxWavelength: state.maxWavelength.to(newUnits),
+      beamline: {
+        ...state.beamline,
+        minWavelength: state.beamline.minWavelength.to(newUnits),
+        maxWavelength: state.beamline.maxWavelength.to(newUnits),
+      },
     })),
+
   updateWavelengthUnits: (newUnits: WavelengthUnits) =>
     set((state) => ({
       wavelength: state.wavelength.to(newUnits),
       userWavelength: state.wavelength.to(newUnits).toNumber(),
-      minWavelength: state.minWavelength.to(newUnits),
-      maxWavelength: state.maxWavelength.to(newUnits),
+      beamline: {
+        ...state.beamline,
+        minWavelength: state.beamline.minWavelength.to(newUnits),
+        maxWavelength: state.beamline.maxWavelength.to(newUnits),
+      },
     })),
+
   updateEnergy: (newEnergy: number | null, newUnits: EnergyUnits) =>
     set({
       energy: unit(newEnergy ?? NaN, newUnits),
       userEnergy: newEnergy,
     }),
+
   updateEnergyUnits: (newUnits: EnergyUnits) =>
     set((state) => ({
       energy: state.energy.to(newUnits),
       userEnergy: state.energy.to(newUnits).toNumber(),
     })),
+
   update: (newConfig: Partial<BeamlineConfigStore>) => set({ ...newConfig }),
-  addPreset: (name: string, preset: AppDataFormat)=> 
-  { (state: BeamlineConfigStore) => {
-    state.presetList[name] = preset;
-  }
-  }
 }));
diff --git a/src/data-entry/beamstop.tsx b/src/data-entry/beamstop.tsx
index 5474292..188778d 100644
--- a/src/data-entry/beamstop.tsx
+++ b/src/data-entry/beamstop.tsx
@@ -8,68 +8,73 @@ import {
   Button,
   TextField,
   InputAdornment,
+  Divider,
 } from "@mui/material";
-import { DistanceUnits } from "../utils/units";
+import { LengthUnits } from "../utils/units";
 import { useBeamstopStore } from "./beamstopStore";
 import { useDetectorStore } from "./detectorStore";
+import { AppDetector } from "../utils/types";
 
 /**
  * Component with data entry inputs for the Beamstop
- * @returns 
+ * @returns
  */
 export default function BeamStopDataEntry(): JSX.Element {
-  const beamstop = useBeamstopStore();
+  const beamstopStore = useBeamstopStore();
 
   const handleX = (event: React.ChangeEvent<HTMLInputElement>) => {
-    beamstop.updateCentre({
+    beamstopStore.updateCentre({
       x: parseFloat(event.target.value),
     });
   };
 
   const handleY = (event: React.ChangeEvent<HTMLInputElement>) => {
-    beamstop.updateCentre({
+    beamstopStore.updateCentre({
       y: parseFloat(event.target.value),
     });
   };
 
   const handleClearance = (event: React.ChangeEvent<HTMLInputElement>) => {
-    beamstop.updateClearance(parseFloat(event.target.value));
+    beamstopStore.updateClearance(parseFloat(event.target.value));
   };
 
-  const detector = useDetectorStore();
+  const detector = useDetectorStore<AppDetector>((state) => state.detector);
 
   const centreDetector = () => {
-    beamstop.updateCentre({
+    beamstopStore.updateCentre({
       x: detector.resolution.width / 2,
       y: detector.resolution.height / 2,
     });
   };
 
   const centreTopEdge = () => {
-    beamstop.updateCentre({ x: detector.resolution.width / 2, y: 0 });
+    beamstopStore.updateCentre({ x: detector.resolution.width / 2, y: 0 });
   };
 
   return (
     <Stack spacing={1}>
       <Typography variant="h6"> Beamstop </Typography>
-      <Stack direction={"row"}>
+      <Divider />
+      <Stack direction={"row"} alignItems={"center"}>
         {/* Diameter */}
         <Typography flexGrow={1}>
           {" "}
-          Diameter: {beamstop.diameter.toNumber().toFixed(2)}{" "}
+          Diameter: {beamstopStore.beamstop.diameter.toNumber().toFixed(2)}{" "}
         </Typography>
         <FormControl>
           <InputLabel>units </InputLabel>
           <Select
             size="small"
             label="units"
-            value={beamstop.diameter.formatUnits()}
+            value={beamstopStore.beamstop.diameter.formatUnits()}
             onChange={(event) =>
-              beamstop.updateDiameterUnits(event.target.value as DistanceUnits)
+              beamstopStore.updateDiameterUnits(
+                event.target.value as LengthUnits,
+              )
             }
           >
-            <MenuItem value={DistanceUnits.millimetre}>{"mm"}</MenuItem>
-            <MenuItem value={DistanceUnits.micrometre}>
+            <MenuItem value={LengthUnits.millimetre as string}>{"mm"}</MenuItem>
+            <MenuItem value={LengthUnits.micrometre as string}>
               {"\u03bc" + "m"}
             </MenuItem>
           </Select>
@@ -77,12 +82,12 @@ export default function BeamStopDataEntry(): JSX.Element {
       </Stack>
       {/* Position */}
       <Typography>Position:</Typography>
-      <Stack direction={"row"} spacing={2}>
+      <Stack direction={"row"} spacing={1}>
         <TextField
           type="number"
           size="small"
           label="x"
-          value={beamstop.centre.x}
+          value={beamstopStore.beamstop.centre.x}
           onChange={handleX}
           InputProps={{
             endAdornment: <InputAdornment position="end">px</InputAdornment>,
@@ -97,7 +102,7 @@ export default function BeamStopDataEntry(): JSX.Element {
           type="number"
           size="small"
           label="y"
-          value={beamstop.centre.y}
+          value={beamstopStore.beamstop.centre.y}
           onChange={handleY}
           InputProps={{
             endAdornment: <InputAdornment position="end">px</InputAdornment>,
@@ -112,7 +117,7 @@ export default function BeamStopDataEntry(): JSX.Element {
           type="number"
           size="small"
           label="clearance"
-          value={beamstop.clearance}
+          value={beamstopStore.beamstop.clearance}
           onChange={handleClearance}
           InputProps={{
             endAdornment: <InputAdornment position="end">px</InputAdornment>,
diff --git a/src/data-entry/beamstopStore.ts b/src/data-entry/beamstopStore.ts
index 4603019..86790c7 100644
--- a/src/data-entry/beamstopStore.ts
+++ b/src/data-entry/beamstopStore.ts
@@ -1,29 +1,51 @@
-import { Beamstop, SimpleVector2 } from "../utils/types";
+import { AppBeamstop, SimpleVector2 } from "../utils/types";
 import { create } from "zustand";
-import { DistanceUnits } from "../utils/units";
+import { LengthUnits } from "../utils/units";
 import { defaultConfig } from "../presets/presetManager";
 import { unit } from "mathjs";
 
-export interface BeamstopStore extends Beamstop {
+export interface BeamstopStore {
+  beamstop: AppBeamstop;
   updateCentre: (centre: Partial<SimpleVector2>) => void;
-  updateDiameter: (newDiameter: number, newUnits: DistanceUnits) => void;
-  updateDiameterUnits: (newUnits: DistanceUnits) => void;
+  updateDiameter: (newDiameter: number, newUnits: LengthUnits) => void;
+  updateDiameterUnits: (newUnits: LengthUnits) => void;
   updateClearance: (newClearnace: number | null) => void;
-  updateBeamstop: (presetBeamstop: Beamstop) => void;
+  updateBeamstop: (presetBeamstop: AppBeamstop) => void;
 }
 
 /**
- * Zustand store with information on the beamstop
+ * Zustand store for the beamstop
  */
 export const useBeamstopStore = create<BeamstopStore>((set) => ({
-  ...defaultConfig.beamstop,
+  beamstop: defaultConfig.beamstop,
   updateCentre: (newCentre: Partial<SimpleVector2>) =>
-    set((state) => ({ centre: { ...state.centre, ...newCentre } })),
-  updateDiameter: (newDiameter: number, newUnits: DistanceUnits) =>
-    set({ diameter: unit(newDiameter, newUnits) }),
-  updateDiameterUnits: (newUnits: DistanceUnits) =>
-    set((state) => ({ diameter: state.diameter.to(newUnits) })),
+    set((state) => ({
+      beamstop: {
+        ...state.beamstop,
+        centre: { ...state.beamstop.centre, ...newCentre },
+      },
+    })),
+  updateDiameter: (newDiameter: number, newUnits: LengthUnits) =>
+    set((state) => ({
+      beamstop: {
+        ...state.beamstop,
+        diameter: unit(newDiameter, newUnits as string),
+      },
+    })),
+  updateDiameterUnits: (newUnits: LengthUnits) =>
+    set((state) => ({
+      beamstop: {
+        ...state.beamstop,
+        diameter: state.beamstop.diameter.to(newUnits as string),
+      },
+    })),
   updateClearance: (newClearnace: number | null) =>
-    set({ clearance: newClearnace }),
-  updateBeamstop: (presetBeamstop: Beamstop) => set(presetBeamstop),
+    set((state) => ({
+      beamstop: {
+        ...state.beamstop,
+        clearance: newClearnace,
+      },
+    })),
+  updateBeamstop: (presetBeamstop: AppBeamstop) =>
+    set({ beamstop: presetBeamstop }),
 }));
diff --git a/src/data-entry/cameraTube.tsx b/src/data-entry/cameraTube.tsx
index 414d7e2..405240a 100644
--- a/src/data-entry/cameraTube.tsx
+++ b/src/data-entry/cameraTube.tsx
@@ -1,4 +1,5 @@
 import {
+  Divider,
   FormControl,
   InputAdornment,
   InputLabel,
@@ -9,21 +10,21 @@ import {
 } from "@mui/material";
 import { Stack } from "@mui/system";
 import { useCameraTubeStore } from "./cameraTubeStore";
-import { DistanceUnits } from "../utils/units";
+import { LengthUnits } from "../utils/units";
 
 /**
  * Component with inputs for cameratube data entry
- * @returns 
+ * @returns
  */
 export default function CameraTubeDataEntry(): JSX.Element {
-  const cameraTube = useCameraTubeStore();
+  const cameraTubeStore = useCameraTubeStore();
   const handleX = (event: React.ChangeEvent<HTMLInputElement>) => {
-    cameraTube.updateCentre({
+    cameraTubeStore.updateCentre({
       x: parseFloat(event.target.value),
     });
   };
   const handleY = (event: React.ChangeEvent<HTMLInputElement>) => {
-    cameraTube.updateCentre({
+    cameraTubeStore.updateCentre({
       y: parseFloat(event.target.value),
     });
   };
@@ -31,27 +32,26 @@ export default function CameraTubeDataEntry(): JSX.Element {
   return (
     <Stack spacing={1}>
       <Typography variant="h6"> CameraTube </Typography>
-      <Stack direction={"row"}>
+      <Divider />
+      <Stack direction={"row"} alignItems={"center"}>
         <Typography flexGrow={1}>
           {" "}
-          Diameter: {cameraTube.diameter.toNumber()}{" "}
+          Diameter: {cameraTubeStore.cameraTube.diameter.toNumber()}{" "}
         </Typography>
         <FormControl>
           <InputLabel>units </InputLabel>
           <Select
             size="small"
             label="units"
-            value={cameraTube.diameter.formatUnits()}
+            value={cameraTubeStore.cameraTube.diameter.formatUnits()}
             onChange={(event) =>
-              cameraTube.updateDiameterUnits(
-                event.target.value as DistanceUnits,
+              cameraTubeStore.updateDiameterUnits(
+                event.target.value as LengthUnits,
               )
             }
           >
-            <MenuItem value={DistanceUnits.millimetre}>{"mm"}</MenuItem>
-            <MenuItem value={DistanceUnits.micrometre}>
-              {"\u03bc" + "m"}
-            </MenuItem>
+            <MenuItem value={LengthUnits.millimetre}>{"mm"}</MenuItem>
+            <MenuItem value={LengthUnits.micrometre}>{"\u03bc" + "m"}</MenuItem>
           </Select>
         </FormControl>
       </Stack>
@@ -60,7 +60,7 @@ export default function CameraTubeDataEntry(): JSX.Element {
         type="number"
         size="small"
         label="x"
-        value={cameraTube.centre.x}
+        value={cameraTubeStore.cameraTube.centre.x}
         onChange={handleX}
         InputProps={{
           endAdornment: <InputAdornment position="end">px</InputAdornment>,
@@ -70,7 +70,7 @@ export default function CameraTubeDataEntry(): JSX.Element {
         type="number"
         size="small"
         label="y"
-        value={cameraTube.centre.y}
+        value={cameraTubeStore.cameraTube.centre.y}
         onChange={handleY}
         InputProps={{
           endAdornment: <InputAdornment position="end">px</InputAdornment>,
diff --git a/src/data-entry/cameraTubeStore.ts b/src/data-entry/cameraTubeStore.ts
index 29ccdee..1e1cb4c 100644
--- a/src/data-entry/cameraTubeStore.ts
+++ b/src/data-entry/cameraTubeStore.ts
@@ -1,22 +1,43 @@
-import { CircularDevice, SimpleVector2 } from "../utils/types";
+import { AppCircularDevice, SimpleVector2 } from "../utils/types";
 import { create } from "zustand";
-import { DistanceUnits } from "../utils/units";
+import { LengthUnits } from "../utils/units";
 import { defaultConfig } from "../presets/presetManager";
+import { unit } from "mathjs";
 
-export interface CameraTubeStore extends CircularDevice {
+export interface CameraTubeStore {
+  cameraTube: AppCircularDevice;
   updateCentre: (centre: Partial<SimpleVector2>) => void;
-  updateDiameterUnits: (newUnits: DistanceUnits) => void;
-  updateCameraTube: (presetCameraTube: CircularDevice) => void;
+  updateDiameterUnits: (newUnits: LengthUnits) => void;
+  updateCameraTube: (presetCameraTube: AppCircularDevice) => void;
+  updateDiameter: (newDiameter: number, newUnits: LengthUnits) => void;
 }
 
 /**
- * Zustand store with camera tube information
+ * Zustand store for the camera tube.
  */
 export const useCameraTubeStore = create<CameraTubeStore>((set) => ({
-  ...defaultConfig.cameraTube,
+  cameraTube: defaultConfig.cameraTube,
   updateCentre: (newCentre: Partial<SimpleVector2>) =>
-    set((state) => ({ centre: { ...state.centre, ...newCentre } })),
-  updateDiameterUnits: (newUnits: DistanceUnits) =>
-    set((state) => ({ diameter: state.diameter.to(newUnits) })),
-  updateCameraTube: (presetCameraTube: CircularDevice) => set(presetCameraTube),
+    set((state) => ({
+      cameraTube: {
+        ...state.cameraTube,
+        centre: { ...state.cameraTube.centre, ...newCentre },
+      },
+    })),
+  updateDiameterUnits: (newUnits: LengthUnits) =>
+    set((state) => ({
+      cameraTube: {
+        ...state.cameraTube,
+        diameter: state.cameraTube.diameter.to(newUnits as string),
+      },
+    })),
+  updateCameraTube: (presetCameraTube: AppCircularDevice) =>
+    set({ cameraTube: presetCameraTube }),
+  updateDiameter: (newDiameter: number, newUnits: LengthUnits) =>
+    set((state) => ({
+      cameraTube: {
+        ...state.cameraTube,
+        diameter: unit(newDiameter, newUnits as string),
+      },
+    })),
 }));
diff --git a/src/data-entry/dataSideBar.tsx b/src/data-entry/dataSideBar.tsx
index 2ce08da..b2a7daf 100644
--- a/src/data-entry/dataSideBar.tsx
+++ b/src/data-entry/dataSideBar.tsx
@@ -1,9 +1,7 @@
 import {
   Card,
-  CardContent,
   Stack,
   Typography,
-  Divider,
   Autocomplete,
   TextField,
   FormControl,
@@ -11,44 +9,29 @@ import {
   MenuItem,
   InputLabel,
   Button,
+  Divider,
 } from "@mui/material";
-import { DistanceUnits } from "../utils/units";
+import { LengthUnits } from "../utils/units";
 import BeamStopDataEntry from "./beamstop";
 import CameraTubeDataEntry from "./cameraTube";
 import BeampropertiesDataEntry from "./beamProperties";
 import { useBeamlineConfigStore } from "./beamlineconfigStore";
-import { presetList } from "../presets/presetManager";
-import { useBeamstopStore } from "./beamstopStore";
-import { useCameraTubeStore } from "./cameraTubeStore";
 import { useDetectorStore } from "./detectorStore";
 import DetectorDialog from "../dialogs/detectorDialog";
 import React from "react";
-import PresetDialog from "../dialogs/presetDialog";
+import PresetDialog from "../dialogs/beamlineDialog";
+import { useBeamstopStore } from "./beamstopStore";
+import { useCameraTubeStore } from "./cameraTubeStore";
 
 /**
- * React component which represents the whole side bar for data entry.
+ * React components which represents the whole side bar for data entry.
  * @returns
  */
 export default function DataSideBar(): JSX.Element {
-  const detector = useDetectorStore();
-  const detectorList = useDetectorStore((state) => state.detectorList);
-  const beamlineConfig = useBeamlineConfigStore();
-
-  const updateBeamstop = useBeamstopStore((state) => state.updateBeamstop);
-  const updateCameraTube = useCameraTubeStore(
-    (state) => state.updateCameraTube,
-  );
-  const updateBeamlineConfig = useBeamlineConfigStore((state) => state.update);
-  const updateDetector = useDetectorStore((state) => state.updateDetector);
-  const handlePreset = (preset: string) => {
-    const { beamstop, cameraTube, detector, ...beamlineConfig } =
-      presetList[preset];
-    updateDetector(detector);
-    updateBeamstop(beamstop);
-    updateCameraTube(cameraTube);
-    updateBeamlineConfig(beamlineConfig);
-    updateBeamlineConfig({ preset: preset });
-  };
+  const detectorStore = useDetectorStore();
+  const beamstopStore = useBeamstopStore();
+  const cameraTubeStore = useCameraTubeStore();
+  const beamlineConfigStore = useBeamlineConfigStore();
 
   const [openDetector, setOpenDetector] = React.useState(false);
 
@@ -60,112 +43,138 @@ export default function DataSideBar(): JSX.Element {
     setOpenDetector(false);
   };
 
-  const [openPreset, setOpenPreset] = React.useState(false);
+  const [openBeamline, setOpenBeamline] = React.useState(false);
 
   const handleClickOpenPreset = () => {
-    setOpenPreset(true);
+    setOpenBeamline(true);
   };
 
   const handleClosePreset = () => {
-    setOpenPreset(false);
+    setOpenBeamline(false);
+  };
+
+  const handleBeamlineUpdate = (
+    _: React.SyntheticEvent,
+    value: string | null,
+  ) => {
+    if (value) {
+      beamlineConfigStore.updateBeamline(value);
+      beamstopStore.updateDiameter(
+        beamlineConfigStore.beamlineRecord[value].beamstopDiameter,
+        LengthUnits.millimetre,
+      );
+      cameraTubeStore.updateDiameter(
+        beamlineConfigStore.beamlineRecord[value].cameratubeDiameter,
+        LengthUnits.millimetre,
+      );
+    }
   };
 
   return (
-    <Card>
-      <CardContent>
-        <Stack spacing={1}>
-          <Typography variant="h6">Preset</Typography>
-          <Stack direction={"row"} spacing={2}>
-            <Autocomplete
-              size="small"
-              disablePortal
-              id="combo-box-demo"
-              options={Object.keys(presetList)}
-              value={beamlineConfig.preset}
-              sx={{ width: 300, color: "white" }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="choose beamline preset"
-                  sx={{ color: "white" }}
-                />
-              )}
-              onChange={(_, value) => {
-                value ? handlePreset(value) : {};
-              }}
-            />
-            <Button variant="outlined" onClick={handleClickOpenPreset}>
-              Add beamline
-            </Button>
-            <PresetDialog
-              open={openPreset}
-              handleClose={handleClosePreset}
-              handleOpen={handleClickOpenPreset}
-            />
-          </Stack>
-          <Typography variant="h6">Detector</Typography>
-          <Stack direction={"row"} spacing={2}>
-            <Autocomplete
-              size="small"
-              disablePortal
-              id="combo-box-demo"
-              options={Object.keys(detectorList)}
-              sx={{ width: 300 }}
-              renderInput={(params) => (
-                <TextField {...params} label="choose detector type" />
-              )}
-              value={detector.name}
-              onChange={(_, value) => {
-                value ? detector.updateDetector(value) : {};
-              }}
-            />
-            <Button variant="outlined" onClick={handleClickOpenDetector}>
-              {" "}
-              Add detector
-            </Button>
-            <DetectorDialog
-              open={openDetector}
-              handleClose={handleCloseDetector}
-              handleOpen={handleClickOpenDetector}
-            />
+    <Stack sx={{ maxHeight: "91vh", overflow: "scroll" }}>
+      <Stack spacing={1}>
+        <Card sx={{ p: 2 }} variant="outlined">
+          <Stack spacing={1}>
+            <Typography variant="h6">Beamline</Typography>
+            <Divider />
+            <Stack direction={"row"} spacing={1}>
+              <Autocomplete
+                size="small"
+                options={Object.keys(beamlineConfigStore.beamlineRecord)}
+                value={beamlineConfigStore.beamlineName}
+                sx={{ width: 300, color: "white" }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="choose beamline"
+                    sx={{ color: "white" }}
+                  />
+                )}
+                onChange={handleBeamlineUpdate}
+              />
+              <Button variant="outlined" onClick={handleClickOpenPreset}>
+                Add beamline
+              </Button>
+              <PresetDialog
+                open={openBeamline}
+                handleClose={handleClosePreset}
+                handleOpen={handleClickOpenPreset}
+              />
+            </Stack>
           </Stack>
-
-          <Typography>
-            Resolution (hxw): {detector.resolution.height} x{" "}
-            {detector.resolution.width}
-          </Typography>
-          <Stack direction="row">
-            <Typography flexGrow={2}>
-              Pixel size: {detector.pixelSize.height.toString()} x{" "}
-              {detector.pixelSize.width.toString()}
-            </Typography>
-            <FormControl>
-              <InputLabel>units</InputLabel>
-              <Select
+        </Card>
+        <Card sx={{ p: 2 }} variant="outlined">
+          <Stack spacing={1}>
+            <Typography variant="h6">Detector</Typography>
+            <Divider />
+            <Stack direction={"row"} spacing={1}>
+              <Autocomplete
                 size="small"
-                label="units"
-                value={detector.pixelSize.height.formatUnits()}
-                onChange={(event) =>
-                  detector.updatePixelUnits(event.target.value as DistanceUnits)
-                }
-              >
-                <MenuItem value={DistanceUnits.millimetre}>
-                  {DistanceUnits.millimetre} x {DistanceUnits.millimetre}
-                </MenuItem>
-                <MenuItem value={DistanceUnits.micrometre}>
-                  {"\u03BC" + "m"} x {"\u03BC" + "m"}
-                </MenuItem>
-              </Select>
-            </FormControl>
+                options={Object.keys(detectorStore.detectorRecord)}
+                sx={{ width: 300 }}
+                renderInput={(params) => (
+                  <TextField {...params} label="choose detector" />
+                )}
+                value={detectorStore.name}
+                onChange={(_, value) => {
+                  value ? detectorStore.updateDetector(value) : {};
+                }}
+              />
+              <Button variant="outlined" onClick={handleClickOpenDetector}>
+                {" "}
+                Add detector
+              </Button>
+              <DetectorDialog
+                open={openDetector}
+                handleClose={handleCloseDetector}
+                handleOpen={handleClickOpenDetector}
+              />
+            </Stack>
+            <Typography>
+              Resolution (hxw): 
+              {detectorStore.detector.resolution.height} x{" "}
+              {detectorStore.detector.resolution.width}
+            </Typography>
+            <Stack direction="row" alignItems={"center"}>
+              <Typography flexGrow={2}>
+                Pixel size:{" "}
+                {detectorStore.detector.pixelSize.height.toNumber().toFixed(2)}
+                {" x "}
+                {detectorStore.detector.pixelSize.width.toNumber().toFixed(2)}
+              </Typography>
+              <FormControl>
+                <InputLabel>units</InputLabel>
+                <Select
+                  size="small"
+                  label="units"
+                  value={detectorStore.detector.pixelSize.height.formatUnits()}
+                  onChange={(event) =>
+                    detectorStore.updatePixelUnits(
+                      event.target.value as LengthUnits,
+                    )
+                  }
+                >
+                  <MenuItem value={LengthUnits.millimetre}>
+                    {LengthUnits.millimetre} x {LengthUnits.millimetre}
+                  </MenuItem>
+                  <MenuItem value={LengthUnits.micrometre}>
+                    {"\u03BC" + "m"} x {"\u03BC" + "m"}
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </Stack>
           </Stack>
-          <Divider />
+        </Card>
+        <Card sx={{ p: 2 }} variant="outlined">
           <BeamStopDataEntry />
-          <Divider />
+        </Card>
+        <Card sx={{ p: 2 }} variant="outlined">
           <CameraTubeDataEntry />
-          <Divider />
+        </Card>
+        <Card sx={{ p: 2 }} variant="outlined">
           <BeampropertiesDataEntry />
-        </Stack>
-      </CardContent>
-    </Card>
+        </Card>
+      </Stack>
+    </Stack>
   );
 }
diff --git a/src/data-entry/detectorStore.ts b/src/data-entry/detectorStore.ts
index 7386fab..360fa9d 100644
--- a/src/data-entry/detectorStore.ts
+++ b/src/data-entry/detectorStore.ts
@@ -1,14 +1,15 @@
-import { Detector } from "../utils/types";
+import { AppDetector } from "../utils/types";
 import { create } from "zustand";
-import { DistanceUnits } from "../utils/units";
-import { detectorList, defaultConfig } from "../presets/presetManager";
+import { LengthUnits } from "../utils/units";
+import { detectorRecord, defaultConfig } from "../presets/presetManager";
 
-export interface DetectorStore extends Detector {
+export interface DetectorStore {
+  detector: AppDetector;
   name: string;
-  detectorList: Record<string, Detector>;
+  detectorRecord: Record<string, AppDetector>;
   updateDetector: (newDetector: string) => void;
-  updatePixelUnits: (newUnits: DistanceUnits) => void;
-  addNewDetector: (name: string, detector: Detector) => void;
+  updatePixelUnits: (newUnits: LengthUnits) => void;
+  addNewDetector: (name: string, detector: AppDetector) => void;
 }
 
 /**
@@ -16,23 +17,26 @@ export interface DetectorStore extends Detector {
  */
 export const useDetectorStore = create<DetectorStore>((set) => ({
   name: defaultConfig.detector,
-  ...detectorList[defaultConfig.detector],
-  detectorList: detectorList,
+  detector: detectorRecord[defaultConfig.detector],
+  detectorRecord: detectorRecord,
   updateDetector: (newDetector: string) =>
     set((state: DetectorStore) => ({
-      ...state.detectorList[newDetector],
+      detector: state.detectorRecord[newDetector],
       name: newDetector,
     })),
-  updatePixelUnits: (newUnits: DistanceUnits) =>
+  updatePixelUnits: (newUnits: LengthUnits) =>
     set((state: DetectorStore) => ({
-      pixelSize: {
-        height: state.pixelSize.height.to(newUnits as string),
-        width: state.pixelSize.width.to(newUnits as string),
+      detector: {
+        ...state.detector,
+        pixelSize: {
+          height: state.detector.pixelSize.height.to(newUnits as string),
+          width: state.detector.pixelSize.width.to(newUnits as string),
+        },
       },
     })),
-  addNewDetector: (name: string, detector: Detector) => 
-  { (state: DetectorStore) =>{
-    state.detectorList[name] = detector;
-  }
+  addNewDetector: (name: string, detector: AppDetector) => {
+    set((state: DetectorStore) => ({
+      detectorRecord: { ...state.detectorRecord, [name]: detector },
+    }));
   },
 }));
diff --git a/src/dialogs/BeamlineTable.tsx b/src/dialogs/BeamlineTable.tsx
index 1749950..b420c10 100644
--- a/src/dialogs/BeamlineTable.tsx
+++ b/src/dialogs/BeamlineTable.tsx
@@ -1,11 +1,11 @@
-import { AppDataFormat, presetList } from "../presets/presetManager";
+import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
+import { AppBeamline } from "../utils/types";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
 
 interface BeamlineTableRow {
   name: string;
-  detector: string;
-  angle: number;
-  cameraLength: number | null;
+  cameraTubeDiameter: number;
+  beamstopDiameter: number;
   minWavelength: number;
   maxWavelength: number;
   minCameraLength: number;
@@ -13,12 +13,11 @@ interface BeamlineTableRow {
   cameraLengthStep: number;
 }
 
-function createData(name: string, beamline: AppDataFormat): BeamlineTableRow {
+function createData(name: string, beamline: AppBeamline): BeamlineTableRow {
   return {
     name: name,
-    detector: beamline.detector,
-    angle: beamline.angle.toNumber("deg"),
-    cameraLength: beamline.cameraLength,
+    cameraTubeDiameter: beamline.cameratubeDiameter,
+    beamstopDiameter: beamline.beamstopDiameter,
     minWavelength: beamline.minWavelength.toNumber("nm"),
     maxWavelength: beamline.maxWavelength.toNumber("nm"),
     minCameraLength: beamline.minCameraLength.toNumber("m"),
@@ -28,21 +27,35 @@ function createData(name: string, beamline: AppDataFormat): BeamlineTableRow {
 }
 
 export default function BeamlineTable() {
+  const beamlineConfigStore = useBeamlineConfigStore();
   const displayArray: BeamlineTableRow[] = [];
-  for (const [key, value] of Object.entries(presetList)) {
+  for (const [key, value] of Object.entries(
+    beamlineConfigStore.beamlineRecord,
+  )) {
     displayArray.push(createData(key, value));
   }
 
   const columns: GridColDef[] = [
     { field: "name", headerName: "name", flex: 1 },
-    { field: "detector", headerName: "detector", flex: 1 },
-    { field: "angle", headerName: "angle", flex: 1 },
-    { field: "cameraLength", headerName: "cameraLength", flex: 1 },
-    { field: "minWavelength", headerName: "min wavelength", flex: 1 },
-    { field: "maxWavelength", headerName: "max wavelength", flex: 1 },
-    { field: "minCameraLength", headerName: "min camera length", flex: 1 },
-    { field: "maxCameraLength", headerName: "max camera length", flex: 1 },
-    { field: "cameraLengthStep", headerName: "camera length step", flex: 1 },
+    {
+      field: "beamstopDiameter",
+      headerName: "Beamstop Diameter (mm)",
+      flex: 1,
+    },
+    {
+      field: "cameraTubeDiameter",
+      headerName: "CameraTube Diameter (mm)",
+      flex: 1,
+    },
+    { field: "minWavelength", headerName: "Min wavelength (nm)", flex: 1 },
+    { field: "maxWavelength", headerName: "Max wavelength (nm)", flex: 1 },
+    { field: "minCameraLength", headerName: "Min camera length (m)", flex: 1 },
+    { field: "maxCameraLength", headerName: "Max camera length (m)", flex: 1 },
+    {
+      field: "cameraLengthStep",
+      headerName: "Camera length step (m)",
+      flex: 1,
+    },
   ];
 
   return (
diff --git a/src/dialogs/beamlineDialog.tsx b/src/dialogs/beamlineDialog.tsx
new file mode 100644
index 0000000..b1c2bf3
--- /dev/null
+++ b/src/dialogs/beamlineDialog.tsx
@@ -0,0 +1,195 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  Stack,
+  TextField,
+  IconButton,
+  Typography,
+  Divider,
+} from "@mui/material";
+import BeamlineTable from "./BeamlineTable";
+import CloseIcon from "@mui/icons-material/Close";
+import { IOBeamline } from "../utils/types";
+import { useBeamlineConfigStore } from "../data-entry/beamlineconfigStore";
+import { createInternalBeamline } from "../presets/presetManager";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+const INPUT_PRECISION = 0.000001;
+
+interface BeamlineForm {
+  name: string;
+  beamline: IOBeamline;
+}
+
+export default function PresetDialog(props: {
+  open: boolean;
+  handleClose: () => void;
+  handleOpen: () => void;
+}): JSX.Element {
+  const beamlineConfigStore = useBeamlineConfigStore();
+  const { register, reset, handleSubmit } = useForm<BeamlineForm>();
+  const onSubmit: SubmitHandler<BeamlineForm> = (data: BeamlineForm) => {
+    beamlineConfigStore.addNewBeamline(
+      data.name,
+      createInternalBeamline(data.beamline),
+    );
+    console.log(data);
+    props.handleClose();
+    reset();
+  };
+  return (
+    <Dialog
+      fullWidth={true}
+      maxWidth={"xl"}
+      open={props.open}
+      keepMounted
+      onClose={props.handleClose}
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DialogTitle sx={{ display: "flex", alignItems: "center" }}>
+          <Typography variant="h5"> Beamlines </Typography>
+          <Divider />
+          <IconButton onClick={props.handleClose} sx={{ ml: "auto" }}>
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Grid container spacing={4}>
+            <Grid item xs={8}>
+              <BeamlineTable />
+            </Grid>
+            <Grid item xs={1}>
+              <Divider orientation={"vertical"} />
+            </Grid>
+            <Grid item xs={3}>
+              <Stack spacing={1}>
+                <Typography>Add New Beamline:</Typography>
+                <Divider />
+                <TextField
+                  label="name"
+                  {...register("name", { required: true })}
+                  variant="outlined"
+                  size="small"
+                />
+                <TextField
+                  type="number"
+                  label="min wavelength"
+                  {...register("beamline.minWavelength", { required: true })}
+                  variant="outlined"
+                  size="small"
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">nm</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="max wavelength "
+                  variant="outlined"
+                  size="small"
+                  {...register("beamline.maxWavelength", { required: true })}
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">nm</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="min camera length"
+                  {...register("beamline.minCameraLength", { required: true })}
+                  variant="outlined"
+                  size="small"
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">m</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="max camera length"
+                  variant="outlined"
+                  size="small"
+                  {...register("beamline.maxCameraLength", { required: true })}
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">m</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="camera length step"
+                  {...register("beamline.cameraLengthStep", { required: true })}
+                  variant="outlined"
+                  size="small"
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">m</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="camera tube diameter"
+                  variant="outlined"
+                  {...register("beamline.cameratubeDiameter", {
+                    required: true,
+                  })}
+                  size="small"
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">mm</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="beamstop diamter"
+                  {...register("beamline.beamstopDiameter", { required: true })}
+                  variant="outlined"
+                  size="small"
+                  inputProps={{
+                    step: INPUT_PRECISION,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">mm</InputAdornment>
+                    ),
+                  }}
+                />
+                <Button type="submit" variant="outlined">
+                  Submit
+                </Button>
+              </Stack>
+            </Grid>
+          </Grid>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/src/dialogs/detectorDialog.tsx b/src/dialogs/detectorDialog.tsx
index bf15445..b8fdc57 100644
--- a/src/dialogs/detectorDialog.tsx
+++ b/src/dialogs/detectorDialog.tsx
@@ -1,20 +1,27 @@
 import {
   Button,
   Dialog,
-  DialogActions,
   DialogContent,
   DialogTitle,
   Divider,
   Grid,
+  IconButton,
   InputAdornment,
   Stack,
   TextField,
   Typography,
 } from "@mui/material";
-import React from "react";
 import { useDetectorStore } from "../data-entry/detectorStore";
-import * as mathjs from "mathjs";
 import DetectorTable from "./detectorTable";
+import CloseIcon from "@mui/icons-material/Close";
+import { IODetector } from "../utils/types";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { createInternalDetector } from "../presets/presetManager";
+
+interface DetectorForm {
+  name: string;
+  detector: IODetector;
+}
 
 export default function DetectorDialog(props: {
   open: boolean;
@@ -22,127 +29,110 @@ export default function DetectorDialog(props: {
   handleOpen: () => void;
 }): JSX.Element {
   const detectorStore = useDetectorStore();
-  const [resolutionHeight, setResolutionHeight] = React.useState<number>();
-  const [resolutionWidth, setResolutionWidth] = React.useState<number>();
-  const [pixelHeight, setPixelHeight] = React.useState<number>();
-  const [pixelWidth, setPixelWidth] = React.useState<number>();
-  const [name, setName] = React.useState<string>();
-
-  const handleSubmit = () => {
-    if (
-      resolutionHeight &&
-      resolutionWidth &&
-      pixelHeight &&
-      pixelWidth &&
-      name
-    ) {
-      detectorStore.addNewDetector(name, {
-        resolution: { height: resolutionHeight, width: resolutionWidth },
-        pixelSize: {
-          height: mathjs.unit(pixelHeight, "mm"),
-          width: mathjs.unit(pixelWidth, "mm"),
-        },
-      });
-    }
-
+  const { register, reset, handleSubmit } = useForm<DetectorForm>();
+  const onSubmit: SubmitHandler<DetectorForm> = (data: DetectorForm) => {
+    detectorStore.addNewDetector(
+      data.name,
+      createInternalDetector(data.detector),
+    );
+    console.log(data);
     props.handleClose();
+    reset();
   };
 
   return (
-    <Dialog 
-      open={props.open} 
-      keepMounted onClose={props.handleClose} 
-      maxWidth={"md"}>
-      <DialogTitle>{"Detectors"}</DialogTitle>
-      <DialogContent>
-        <Stack spacing={2}>
-        <Divider />
-          <DetectorTable />
-          <Divider />
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <TextField
-                id="outlined-basic"
-                label="name"
-                onChange={(event) => setName(event.target.value)}
-                variant="outlined"
-                size="small"
-              />
-            </Grid>
-            <Grid item xs={4}>
-              <Typography>Resolution:</Typography>
+    <Dialog
+      open={props.open}
+      keepMounted
+      onClose={props.handleClose}
+      maxWidth={"xl"}
+    >
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DialogTitle sx={{ display: "flex", alignItems: "center" }}>
+          <Typography variant="h5"> Detectors </Typography>
+          <IconButton onClick={props.handleClose} sx={{ ml: "auto" }}>
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Grid container spacing={4}>
+            <Grid item xs={8}>
+              <DetectorTable />
             </Grid>
-            <Grid item xs={3}>
-              <TextField
-                type="number"
-                label="width"
-                onChange={(event) =>
-                  setResolutionWidth(parseFloat(event.target.value))
-                }
-                size="small"
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">px</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={3}>
-              <TextField
-                type="number"
-                label="height"
-                onChange={(event) =>
-                  setResolutionHeight(parseFloat(event.target.value))
-                }
-                size="small"
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">px</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={4}>
-              <Typography> Pixel Size:</Typography>
-            </Grid>
-            <Grid item xs={3}>
-              <TextField
-                type="number"
-                label="x"
-                onChange={(event) =>
-                  setPixelWidth(parseFloat(event.target.value))
-                }
-                size="small"
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">mm</InputAdornment>
-                  ),
-                }}
-              />
+            <Grid item xs={1}>
+              <Divider orientation="vertical" />
             </Grid>
             <Grid item xs={3}>
-              <TextField
-                type="number"
-                label="y"
-                onChange={(event) =>
-                  setPixelHeight(parseFloat(event.target.value))
-                }
-                size="small"
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">mm</InputAdornment>
-                  ),
-                }}
-              />
+              <Stack spacing={1}>
+                <Typography>Add new Detector:</Typography>
+                <TextField
+                  label="name"
+                  {...register("name", { required: true })}
+                  variant="outlined"
+                  size="small"
+                />
+                <Typography>Resolution:</Typography>
+                <TextField
+                  type="number"
+                  label="width"
+                  {...register("detector.resolution.width", { required: true })}
+                  size="small"
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">px</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="height"
+                  {...register("detector.resolution.height", {
+                    required: true,
+                  })}
+                  size="small"
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">px</InputAdornment>
+                    ),
+                  }}
+                />
+                <Typography> Pixel Size:</Typography>
+                <TextField
+                  type="number"
+                  label="width"
+                  {...register("detector.pixelSize.width", { required: true })}
+                  size="small"
+                  inputProps={{
+                    step: 0.000001,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">mm</InputAdornment>
+                    ),
+                  }}
+                />
+                <TextField
+                  type="number"
+                  label="height"
+                  {...register("detector.pixelSize.height", { required: true })}
+                  size="small"
+                  inputProps={{
+                    step: 0.000001,
+                  }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">mm</InputAdornment>
+                    ),
+                  }}
+                />
+                <Button variant="outlined" type="submit">
+                  Submit
+                </Button>
+              </Stack>
             </Grid>
           </Grid>
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleSubmit} variant="outlined">
-          Submit
-        </Button>
-      </DialogActions>
+        </DialogContent>
+      </form>
     </Dialog>
   );
 }
diff --git a/src/dialogs/detectorTable.tsx b/src/dialogs/detectorTable.tsx
index 453cc77..7d7806f 100644
--- a/src/dialogs/detectorTable.tsx
+++ b/src/dialogs/detectorTable.tsx
@@ -1,6 +1,6 @@
-import { Detector } from "../utils/types";
-import { detectorList } from "../presets/presetManager";
+import { AppDetector } from "../utils/types";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
+import { useDetectorStore } from "../data-entry/detectorStore";
 
 interface DetectorTableRow {
   name: string;
@@ -10,7 +10,7 @@ interface DetectorTableRow {
   pixel_width: number;
 }
 
-function createData(name: string, detector: Detector): DetectorTableRow {
+function createData(name: string, detector: AppDetector): DetectorTableRow {
   return {
     name: name,
     resolution_height: detector.resolution.height,
@@ -21,17 +21,22 @@ function createData(name: string, detector: Detector): DetectorTableRow {
 }
 
 export default function DetectorTable() {
+  const detectorStore = useDetectorStore();
   const displayArray: DetectorTableRow[] = [];
-  for (const [key, value] of Object.entries(detectorList)) {
+  for (const [key, value] of Object.entries(detectorStore.detectorRecord)) {
     displayArray.push(createData(key, value));
   }
 
   const columns: GridColDef[] = [
     { field: "name", headerName: "name", flex: 1 },
-    { field: "resolution_height", headerName: "resolution height", flex: 1 },
-    { field: "resolution_width", headerName: "resolution width", flex: 1 },
-    { field: "pixel_height", headerName: "pixel height", flex: 1 },
-    { field: "pixel_width", headerName: "pixel width", flex: 1 },
+    {
+      field: "resolution_height",
+      headerName: "resolution height (px)",
+      flex: 1,
+    },
+    { field: "resolution_width", headerName: "resolution width (px)", flex: 1 },
+    { field: "pixel_height", headerName: "pixel height (mm)", flex: 1 },
+    { field: "pixel_width", headerName: "pixel width (mm)", flex: 1 },
   ];
 
   return (
diff --git a/src/dialogs/presetDialog.tsx b/src/dialogs/presetDialog.tsx
deleted file mode 100644
index b0e1c16..0000000
--- a/src/dialogs/presetDialog.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import {
-  Autocomplete,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  Grid,
-  InputAdornment,
-  Stack,
-  TextField,
-} from "@mui/material";
-import React from "react";
-import BeamlineTable from "./BeamlineTable";
-import { detectorList } from "../presets/presetManager";
-
-const GRID_ITEM_SIZE = 4;
-
-export default function PresetDialog(props: {
-  open: boolean;
-  handleClose: () => void;
-  handleOpen: () => void;
-}): JSX.Element {
-  const [name, setName] = React.useState<string>();
-  const [detector, setDetector] = React.useState<string>();
-  const [angle, setAngle] = React.useState<number>();
-  const [cameraLength, setCameraLength] = React.useState<number>();
-  const [minWavelength, setMinWavelength] = React.useState<number>();
-  const [maxWavelength, setMaxwavelength] = React.useState<number>();
-  const [minCameraLength, setMinCameraLength] = React.useState<number>();
-  const [maxCameraLangth, setMaxCameraLangth] = React.useState<number>();
-  const [cameraLengthStep, setCameraLengthStep] = React.useState<number>();
-
-  const handleSubmit = () => {
-    props.handleClose();
-  };
-
-  return (
-    <Dialog
-      fullWidth={true}
-      maxWidth={"xl"}
-      open={props.open}
-      keepMounted
-      onClose={props.handleClose}
-    >
-      <DialogTitle>{"Beamlines"}</DialogTitle>
-      <DialogContent>
-        <Stack spacing={2}>
-          <BeamlineTable />
-          <Divider />
-          <Grid container spacing={2}>
-          <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                label="name"
-                value={name}
-                variant="outlined"
-                size="small"
-                onChange={(event) => setName(event.target.value)}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-            <Autocomplete
-              size="small"
-              disablePortal
-              options={Object.keys(detectorList)}
-              value={detector}
-              sx={{ width: 300, color: "white" }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="detector"
-                  sx={{ color: "white" }}
-                />
-              )}
-              onChange={(_, value) => {
-                value ? setDetector(value) : {};
-              }}
-            />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="angle"
-                variant="outlined"
-                value={angle}
-                size="small"
-                onChange={(event) => setAngle(parseFloat(event.target.value))}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">deg</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="min wavelength"
-                variant="outlined"
-                value={minWavelength}
-                size="small"
-                onChange={(event) =>
-                  setMinWavelength(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">nm</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="max wavelength "
-                variant="outlined"
-                value={maxWavelength}
-                size="small"
-                onChange={(event) =>
-                  setMaxwavelength(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">nm</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="min camera length"
-                value={minCameraLength}
-                variant="outlined"
-                size="small"
-                onChange={(event) =>
-                  setMinCameraLength(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">m</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="max camera length"
-                variant="outlined"
-                value={maxCameraLangth}
-                size="small"
-                onChange={(event) =>
-                  setMaxCameraLangth(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">m</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="camera length"
-                value={cameraLength}
-                variant="outlined"
-                size="small"
-                onChange={(event) =>
-                  setCameraLength(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">m</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-            <Grid item xs={GRID_ITEM_SIZE}>
-              <TextField
-                type="number"
-                label="camera length step"
-                value={cameraLengthStep}
-                variant="outlined"
-                size="small"
-                onChange={(event) =>
-                  setCameraLengthStep(parseFloat(event.target.value))
-                }
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">m</InputAdornment>
-                  ),
-                }}
-              />
-            </Grid>
-          </Grid>
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleSubmit} variant="outlined">
-          Submit
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
diff --git a/src/index.css b/src/index.css
index 9d08f8e..a969ebc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,18 @@
 @import "@h5web/lib/styles.css";
 
 body {
-    margin: 0;
-    height: 100vh;
-    width: 100vw;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-        sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  height: 100vh;
+  width: 100vw;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: white;
 }
 
-
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
\ No newline at end of file
+}
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
index e45b482..7510230 100644
--- a/src/plot/centrePlot.tsx
+++ b/src/plot/centrePlot.tsx
@@ -7,8 +7,8 @@ import {
   SvgRect,
   VisCanvas,
 } from "@h5web/lib";
-import { Box, Card, CardContent, Stack } from "@mui/material";
-import * as mathjs from "mathjs";
+import { Card, CardContent, Stack } from "@mui/material";
+import { Unit, MathType, divide, multiply, unit, createUnit } from "mathjs";
 import { Vector2, Vector3 } from "three";
 import { computeQrange } from "../calculations/qrange";
 import { getPointForQ } from "../calculations/qvalue";
@@ -28,10 +28,11 @@ import {
   convertBetweenQAndS,
 } from "../results/scatteringQuantities";
 import {
+  AppBeamline,
+  AppBeamstop,
+  AppCircularDevice,
+  AppDetector,
   BeamlineConfig,
-  Beamstop,
-  CircularDevice,
-  Detector,
 } from "../utils/types";
 import { Plotter } from "./Plotter";
 import LegendBar from "./legendBar";
@@ -42,64 +43,61 @@ import { useMemo } from "react";
 
 /**
  * A react componenet that plots the items that make up the system
- * @returns 
+ * @returns
  */
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
-  const beamlineConfig = useBeamlineConfig();
-
-  // todo some form of destructuring notation {...state} might simplify this
-  const detector = useDetectorStore<Detector>();
-
-  const beamstop = useBeamstopStore<Beamstop>((state) => {
-    return {
-      centre: state.centre,
-      diameter: state.diameter,
-      clearance: state.clearance,
-    };
-  });
-
-  const cameraTube = useCameraTubeStore<CircularDevice>((state) => {
-    return { centre: state.centre, diameter: state.diameter };
-  });
-
-  const scaleFactor: mathjs.Unit | null = getScaleFactor(beamlineConfig);
-
-
+  const beamlineConfigStore = useBeamlineConfigStore();
+  const detectorStore = useDetectorStore();
+  const beamstopStore = useBeamstopStore();
+  const cameraTubeStore = useCameraTubeStore();
+
+  // Needed for plotting in q space
+  const scaleFactor: Unit | null = getScaleFactor(
+    beamlineConfigStore.wavelength,
+    beamlineConfigStore.cameraLength,
+  );
 
-const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
-    
-  // todo this might need to be moved elsewhere
+  const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(() => {
+    // todo this might need to be moved elsewhere
     /* eslint-disable */
     // @ts-ignore
-    if (mathjs.Unit.UNITS.xpixel) {
+    if (Unit.UNITS.xpixel) {
       // @ts-ignore
-      delete mathjs.Unit.UNITS.xpixel;
+      delete Unit.UNITS.xpixel;
     }
     // @ts-ignore
-    if (mathjs.Unit.UNITS.ypixel) {
+    if (Unit.UNITS.ypixel) {
       // @ts-ignore
-      delete mathjs.Unit.UNITS.ypixel;
+      delete Unit.UNITS.ypixel;
     }
     /* eslint-enable */
 
+    createUnit("xpixel", detectorStore.detector.pixelSize.width.toString());
+    createUnit("ypixel", detectorStore.detector.pixelSize.height.toString());
 
-    mathjs.createUnit("xpixel", detector.pixelSize.width.toString());
-    mathjs.createUnit("ypixel", detector.pixelSize.height.toString());
-
-    console.log("calculating qrange");
+    const beamlineConfig = getBeamlineConfig(
+      beamlineConfigStore.angle,
+      beamlineConfigStore.cameraLength,
+      beamlineConfigStore.wavelength,
+      beamlineConfigStore.beamline,
+    );
 
     return computeQrange(
-      detector,
-      beamstop,
-      cameraTube,
+      detectorStore.detector,
+      beamstopStore.beamstop,
+      cameraTubeStore.cameraTube,
       beamlineConfig,
     );
-    }, [detector, beamstop, cameraTube, beamlineConfig]);
-
-
-
-
+  }, [
+    detectorStore.detector,
+    beamstopStore.beamstop,
+    cameraTubeStore.cameraTube,
+    beamlineConfigStore.angle,
+    beamlineConfigStore.cameraLength,
+    beamlineConfigStore.wavelength,
+    beamlineConfigStore.beamline,
+  ]);
 
   // todo move these 2 statements into the ResultsBar component
   //  as that's the only place that uses these
@@ -113,7 +111,12 @@ const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
   );
 
   const { beamstopCentre, cameraTubeCentre, minPoint, maxPoint } =
-    getReferencePoints(ptMin, ptMax, beamstop, cameraTube);
+    getReferencePoints(
+      ptMin,
+      ptMax,
+      beamstopStore.beamstop,
+      cameraTubeStore.cameraTube,
+    );
 
   const plotter = new Plotter(plotConfig.plotAxes, scaleFactor);
 
@@ -126,10 +129,10 @@ const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
   } = createPlots(
     plotter,
     beamstopCentre,
-    beamstop,
+    beamstopStore.beamstop,
     cameraTubeCentre,
-    cameraTube,
-    detector,
+    cameraTubeStore.cameraTube,
+    detectorStore.detector,
     minPoint,
     maxPoint,
   );
@@ -144,12 +147,17 @@ const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
 
   if (
     requestedRange &&
-    beamlineConfig.cameraLength &&
-    beamlineConfig.wavelength
+    beamlineConfigStore.cameraLength &&
+    beamlineConfigStore.wavelength
   ) {
     plotRequestedRange = getRequestedRange(
       requestedRange,
-      beamlineConfig,
+      getBeamlineConfig(
+        beamlineConfigStore.angle,
+        beamlineConfigStore.cameraLength,
+        beamlineConfigStore.wavelength,
+        beamlineConfigStore.beamline,
+      ),
       beamstopCentre,
       plotRequestedRange,
       plotter,
@@ -159,217 +167,211 @@ const { ptMin, ptMax, visibleQRange, fullQRange } = useMemo(()=> {
   const domains = getDomains(plotDetector);
 
   return (
-    <Box>
-      <Stack direction="column" spacing={1}>
-        <Stack direction="row" spacing={1}>
-          <Card>
-            <CardContent>
-              <div
-                style={{
-                  display: "grid",
-                  height: "60vh",
-                  width: "65vh",
-                  border: "solid black",
+    <Stack direction="column" spacing={1} sx={{ maxHeight: "91vh" }}>
+      <Stack direction="row" spacing={1}>
+        <Card variant="outlined">
+          <CardContent>
+            <div
+              style={{
+                display: "grid",
+                height: "55vh",
+                width: "60vh",
+                border: "solid black",
+              }}
+            >
+              <VisCanvas
+                abscissaConfig={{
+                  visDomain: [domains.xAxis.min, domains.xAxis.max],
+                  showGrid: true,
+                }}
+                ordinateConfig={{
+                  visDomain: [domains.yAxis.max, domains.yAxis.min],
+                  showGrid: true,
                 }}
               >
-                <VisCanvas
-                  abscissaConfig={{
-                    visDomain: [domains.xAxis.min, domains.xAxis.max],
-                    showGrid: true,
-                  }}
-                  ordinateConfig={{
-                    visDomain: [domains.yAxis.max, domains.yAxis.min],
-                    showGrid: true,
-                  }}
+                <DefaultInteractions />
+                <ResetZoomButton />
+                <DataToHtml
+                  points={[
+                    plotBeamstop.centre,
+                    plotBeamstop.endPointX,
+                    plotBeamstop.endPointY,
+                    plotClearance.centre,
+                    plotClearance.endPointX,
+                    plotClearance.endPointY,
+                    plotCameraTube.centre,
+                    plotCameraTube.endPointX,
+                    plotCameraTube.endPointY,
+                    plotDetector.lowerBound,
+                    plotDetector.upperBound,
+                    plotVisibleRange.start,
+                    plotVisibleRange.end,
+                    plotRequestedRange.start,
+                    plotRequestedRange.end,
+                  ]}
                 >
-                  <DefaultInteractions />
-                  <ResetZoomButton />
-                  <DataToHtml
-                    points={[
-                      plotBeamstop.centre,
-                      plotBeamstop.endPointX,
-                      plotBeamstop.endPointY,
-                      plotClearance.centre,
-                      plotClearance.endPointX,
-                      plotClearance.endPointY,
-                      plotCameraTube.centre,
-                      plotCameraTube.endPointX,
-                      plotCameraTube.endPointY,
-                      plotDetector.lowerBound,
-                      plotDetector.upperBound,
-                      plotVisibleRange.start,
-                      plotVisibleRange.end,
-                      plotRequestedRange.start,
-                      plotRequestedRange.end,
-                    ]}
-                  >
-                    {(
-                      beamstopCentre,
-                      beamstopEndPointX,
-                      beamstopEndPointY,
-                      clearanceCentre,
-                      clearnaceEndPointX,
-                      clearenaceEndPointY,
-                      cameraTubeCentre,
-                      cameraTubeEndPointX,
-                      cameraTubeEndPointY,
-                      detectorLower,
-                      detectorUpper,
-                      visibleRangeStart,
-                      visableRangeEnd,
-                      requestedRangeStart,
-                      requestedRangeEnd,
-                    ) => (
-                      <SvgElement>
-                        {plotConfig.cameraTube && (
-                          <SvgAxisAlignedEllipse
-                            coords={[
-                              cameraTubeCentre,
-                              cameraTubeEndPointX,
-                              cameraTubeEndPointY,
-                            ]}
-                            fill={color2String(plotConfig.cameraTubeColor)}
-                            id="camera tube"
-                          />
-                        )}
-                        {plotConfig.detector && (
-                          <SvgRect
-                            coords={[detectorLower, detectorUpper]}
-                            fill={color2String(plotConfig.detectorColour)}
-                            id="detector"
-                          />
-                        )}
-                        {plotConfig.inaccessibleRange && (
-                          <SvgLine
-                            coords={[beamstopCentre, visibleRangeStart]}
-                            stroke={color2String(
-                              plotConfig.inaccessibleRangeColor,
-                            )}
-                            strokeWidth={3}
-                            id="inaccessible"
-                          />
-                        )}
-                        {plotConfig.clearance && (
-                          <SvgAxisAlignedEllipse
-                            coords={[
-                              clearanceCentre,
-                              clearnaceEndPointX,
-                              clearenaceEndPointY,
-                            ]}
-                            fill={color2String(plotConfig.clearanceColor)}
-                            id="clearance"
-                          />
-                        )}
-                        {plotConfig.visibleRange && (
-                          <SvgLine
-                            coords={[visibleRangeStart, visableRangeEnd]}
-                            stroke={color2String(plotConfig.visibleColor)}
-                            strokeWidth={3}
-                            id="visible"
-                          />
-                        )}
-                        {plotConfig.requestedRange && (
-                          <SvgLine
-                            coords={[requestedRangeStart, requestedRangeEnd]}
-                            stroke={color2String(
-                              plotConfig.requestedRangeColor,
-                            )}
-                            strokeWidth={3}
-                            id="requested"
-                          />
-                        )}
-                        {plotConfig.beamstop && (
-                          <SvgAxisAlignedEllipse
-                            coords={[
-                              beamstopCentre,
-                              beamstopEndPointX,
-                              beamstopEndPointY,
-                            ]}
-                            fill={color2String(plotConfig.beamstopColor)}
-                            id="beamstop"
-                          />
-                        )}
-                      </SvgElement>
-                    )}
-                  </DataToHtml>
-                </VisCanvas>
-              </div>
-            </CardContent>
-          </Card>
-          <Box flexGrow={1}>
-            <LegendBar />
-          </Box>
-        </Stack>
-        <ResultsBar
-          visableQRange={visibleQRangeUnits}
-          fullQrange={fullQRangeUnits}
-        />
+                  {(
+                    beamstopCentre,
+                    beamstopEndPointX,
+                    beamstopEndPointY,
+                    clearanceCentre,
+                    clearnaceEndPointX,
+                    clearenaceEndPointY,
+                    cameraTubeCentre,
+                    cameraTubeEndPointX,
+                    cameraTubeEndPointY,
+                    detectorLower,
+                    detectorUpper,
+                    visibleRangeStart,
+                    visableRangeEnd,
+                    requestedRangeStart,
+                    requestedRangeEnd,
+                  ) => (
+                    <SvgElement>
+                      {plotConfig.cameraTube && (
+                        <SvgAxisAlignedEllipse
+                          coords={[
+                            cameraTubeCentre,
+                            cameraTubeEndPointX,
+                            cameraTubeEndPointY,
+                          ]}
+                          fill={color2String(plotConfig.cameraTubeColor)}
+                          id="camera tube"
+                        />
+                      )}
+                      {plotConfig.detector && (
+                        <SvgRect
+                          coords={[detectorLower, detectorUpper]}
+                          fill={color2String(plotConfig.detectorColor)}
+                          id="detector"
+                        />
+                      )}
+                      {plotConfig.inaccessibleRange && (
+                        <SvgLine
+                          coords={[beamstopCentre, visibleRangeStart]}
+                          stroke={color2String(
+                            plotConfig.inaccessibleRangeColor,
+                          )}
+                          strokeWidth={3}
+                          id="inaccessible"
+                        />
+                      )}
+                      {plotConfig.clearance && (
+                        <SvgAxisAlignedEllipse
+                          coords={[
+                            clearanceCentre,
+                            clearnaceEndPointX,
+                            clearenaceEndPointY,
+                          ]}
+                          fill={color2String(plotConfig.clearanceColor)}
+                          id="clearance"
+                        />
+                      )}
+                      {plotConfig.visibleRange && (
+                        <SvgLine
+                          coords={[visibleRangeStart, visableRangeEnd]}
+                          stroke={color2String(plotConfig.visibleColor)}
+                          strokeWidth={3}
+                          id="visible"
+                        />
+                      )}
+                      {plotConfig.requestedRange && (
+                        <SvgLine
+                          coords={[requestedRangeStart, requestedRangeEnd]}
+                          stroke={color2String(plotConfig.requestedRangeColor)}
+                          strokeWidth={3}
+                          id="requested"
+                        />
+                      )}
+                      {plotConfig.beamstop && (
+                        <SvgAxisAlignedEllipse
+                          coords={[
+                            beamstopCentre,
+                            beamstopEndPointX,
+                            beamstopEndPointY,
+                          ]}
+                          fill={color2String(plotConfig.beamstopColor)}
+                          id="beamstop"
+                        />
+                      )}
+                    </SvgElement>
+                  )}
+                </DataToHtml>
+              </VisCanvas>
+            </div>
+          </CardContent>
+        </Card>
+        <LegendBar />
       </Stack>
-    </Box>
+      <ResultsBar
+        visableQRange={visibleQRangeUnits}
+        fullQrange={fullQRangeUnits}
+      />
+    </Stack>
   );
 }
 
-function getScaleFactor(beamlineConfig: BeamlineConfig) {
-  let scaleFactor: mathjs.MathType | null = null;
-  if (beamlineConfig.cameraLength && beamlineConfig.wavelength) {
-    scaleFactor = mathjs.divide(
+/**
+ * Calculates the scale factor which is used for Plotting in units of Q
+ * @param wavelength current wave length as a Unit
+ * @param cameraLength cameralength
+ * @returns
+ */
+function getScaleFactor(wavelength: Unit, cameraLength: number | null) {
+  let scaleFactor: MathType | null = null;
+  if (cameraLength && wavelength) {
+    scaleFactor = divide(
       2 * Math.PI,
-      mathjs.multiply(
-        mathjs.unit(beamlineConfig.cameraLength, "m"),
-        beamlineConfig.wavelength.to("m"),
-      ),
+      multiply(unit(cameraLength, "m"), wavelength.to("m")),
     );
   }
   if (scaleFactor == null) {
     return scaleFactor;
   }
-
   if (typeof scaleFactor == "number" || !("units" in scaleFactor)) {
     throw TypeError("scaleFactor should be a unit not a number");
   }
-
   return scaleFactor;
 }
 
-function useBeamlineConfig() {
-  return useBeamlineConfigStore<BeamlineConfig>((state) => {
-    return {
-      angle: state.angle,
-      cameraLength: state.cameraLength,
-      minWavelength: state.minWavelength,
-      maxWavelength: state.maxWavelength,
-      minCameraLength: state.minCameraLength,
-      maxCameraLength: state.maxCameraLength,
-      cameraLengthStep: state.cameraLengthStep,
-      wavelength: state.wavelength,
-    };
-  });
+function getBeamlineConfig(
+  angle: Unit,
+  cameraLength: number | null,
+  wavelength: Unit,
+  beamline: AppBeamline,
+): BeamlineConfig {
+  return {
+    angle: angle,
+    cameraLength: cameraLength,
+    beamline: beamline,
+    wavelength: wavelength,
+  };
 }
 
 function getReferencePoints(
   ptMin: Vector2,
   ptMax: Vector2,
-  beamstop: Beamstop,
-  cameraTube: CircularDevice,
+  beamstop: AppBeamstop,
+  cameraTube: AppCircularDevice,
 ) {
   const minPoint: UnitVector = {
-    x: mathjs.unit(ptMin.x, "m"),
-    y: mathjs.unit(ptMin.y, "m"),
+    x: unit(ptMin.x, "m"),
+    y: unit(ptMin.y, "m"),
   };
 
   const maxPoint: UnitVector = {
-    x: mathjs.unit(ptMax.x, "m"),
-    y: mathjs.unit(ptMax.y, "m"),
+    x: unit(ptMax.x, "m"),
+    y: unit(ptMax.y, "m"),
   };
 
   const beamstopCentre: UnitVector = {
-    x: mathjs.unit(beamstop.centre.x ?? NaN, "xpixel"),
-    y: mathjs.unit(beamstop.centre.y ?? NaN, "ypixel"),
+    x: unit(beamstop.centre.x ?? NaN, "xpixel"),
+    y: unit(beamstop.centre.y ?? NaN, "ypixel"),
   };
 
   const cameraTubeCentre: UnitVector = {
-    x: mathjs.unit(cameraTube.centre.x ?? NaN, "xpixel"),
-    y: mathjs.unit(cameraTube.centre.y ?? NaN, "ypixel"),
+    x: unit(cameraTube.centre.x ?? NaN, "xpixel"),
+    y: unit(cameraTube.centre.y ?? NaN, "ypixel"),
   };
   return { beamstopCentre, cameraTubeCentre, minPoint, maxPoint };
 }
@@ -377,10 +379,10 @@ function getReferencePoints(
 function createPlots(
   plotter: Plotter,
   beamstopCentre: UnitVector,
-  beamstop: Beamstop,
+  beamstop: AppBeamstop,
   cameraTubeCentre: UnitVector,
-  cameraTube: CircularDevice,
-  detector: Detector,
+  cameraTube: AppCircularDevice,
+  detector: AppDetector,
   minPoint: UnitVector,
   maxPoint: UnitVector,
 ) {
@@ -432,14 +434,14 @@ function getRequestedRange(
   const requestedMaxPt = getPointForQ(
     requestedRange.max,
     beamlineConfig.angle,
-    mathjs.unit(beamlineConfig.cameraLength, "m"),
+    unit(beamlineConfig.cameraLength ?? NaN, "m"),
     beamlineConfig.wavelength,
     beamstopCentre,
   );
   const requestedMinPt = getPointForQ(
     requestedRange.min,
     beamlineConfig.angle,
-    mathjs.unit(beamlineConfig.cameraLength, "m"),
+    unit(beamlineConfig.cameraLength ?? NaN, "m"),
     beamlineConfig.wavelength,
     beamstopCentre,
   );
@@ -457,17 +459,17 @@ function getRange(): (state: ResultStore) => UnitRange | null {
       return null;
     }
 
-    const getUnit = (value: number): mathjs.Unit => {
-      let result: mathjs.Unit;
+    const getUnit = (value: number): Unit => {
+      let result: Unit;
       switch (state.requested) {
         case ScatteringOptions.d:
-          result = convertBetweenQAndD(mathjs.unit(value, state.dUnits));
+          result = convertBetweenQAndD(unit(value, state.dUnits));
           break;
         case ScatteringOptions.s:
-          result = convertBetweenQAndS(mathjs.unit(value, state.sUnits));
+          result = convertBetweenQAndS(unit(value, state.sUnits));
           break;
         default:
-          result = mathjs.unit(value, state.qUnits);
+          result = unit(value, state.qUnits);
       }
       return result;
     };
diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
index 59d9fde..8aa5d18 100644
--- a/src/plot/legendBar.tsx
+++ b/src/plot/legendBar.tsx
@@ -19,7 +19,7 @@ export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
 
   return (
-    <Card sx={{ height: 1, width: 1 }}>
+    <Card sx={{ flexGrow: 1 }} variant="outlined">
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6"> Legend</Typography>
@@ -37,16 +37,14 @@ export default function LegendBar(): JSX.Element {
               label={
                 <Stack direction={"row"}>
                   <ColourPickerPopover
-                    color={plotConfig.detectorColour}
+                    color={plotConfig.detectorColor}
                     onChangeComplete={(color) =>
-                      plotConfig.update({ detectorColour: color.rgb })
+                      plotConfig.update({ detectorColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"} 
-                    alignItems={"center"} 
-                    >
-                      Detector</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Detector
+                  </Typography>
                 </Stack>
               }
             />
@@ -67,11 +65,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ cameraTubeColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"} 
-                    alignItems={"center"} 
-                  >
-                    Camera Tube</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Camera Tube
+                  </Typography>
                 </Stack>
               }
             />
@@ -92,9 +88,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ beamstopColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"} alignItems={"center"}>
-                      Beamstop</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Beamstop
+                  </Typography>
                 </Stack>
               }
             />
@@ -115,11 +111,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ clearanceColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"}
-                    alignItems={"center"}
-                  >
-                    Clearance</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Clearance
+                  </Typography>
                 </Stack>
               }
             />
@@ -140,11 +134,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ visibleColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"}
-                    alignItems={"center"}
-                  >
-                    Visible Range</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Visible Range
+                  </Typography>
                 </Stack>
               }
             />
@@ -165,11 +157,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ requestedRangeColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"} 
-                    alignItems={"center"} 
-                  >
-                    Requested Range</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Requested Range
+                  </Typography>
                 </Stack>
               }
             />
@@ -190,11 +180,9 @@ export default function LegendBar(): JSX.Element {
                       plotConfig.update({ inaccessibleRangeColor: color.rgb })
                     }
                   />
-                  <Typography 
-                    display={"flex"}
-                    alignItems={"center"}
-                  >
-                    Inaccessible Range</Typography>
+                  <Typography display={"flex"} alignItems={"center"}>
+                    Inaccessible Range
+                  </Typography>
                 </Stack>
               }
             />
diff --git a/src/plot/plotStore.ts b/src/plot/plotStore.ts
index aacc91f..e4ed3d9 100644
--- a/src/plot/plotStore.ts
+++ b/src/plot/plotStore.ts
@@ -9,7 +9,7 @@ export enum PlotAxes {
 
 export interface PlotConfig {
   detector: boolean;
-  detectorColour: RGBColor;
+  detectorColor: RGBColor;
   beamstop: boolean;
   beamstopColor: RGBColor;
   cameraTube: boolean;
@@ -28,7 +28,7 @@ export interface PlotConfig {
 
 export const usePlotStore = create<PlotConfig>((set) => ({
   detector: true,
-  detectorColour: { r: 144, g: 19, b: 254, a: 0.4 },
+  detectorColor: { r: 144, g: 19, b: 254, a: 0.4 },
   beamstop: true,
   beamstopColor: { r: 0, g: 0, b: 0, a: 1 },
   cameraTube: true,
diff --git a/src/presets/beamlines.json b/src/presets/beamlines.json
new file mode 100644
index 0000000..d912d33
--- /dev/null
+++ b/src/presets/beamlines.json
@@ -0,0 +1,20 @@
+{
+  "I22": {
+    "beamstopDiameter": 4,
+    "cameratubeDiameter": 310,
+    "minWavelength": 0.062,
+    "maxWavelength": 0.335,
+    "minCameraLength": 1.9,
+    "maxCameraLength": 9.9,
+    "cameraLengthStep": 0.25
+  },
+  "test": {
+    "beamstopDiameter": 10,
+    "cameratubeDiameter": 345,
+    "minWavelength": 0.05,
+    "maxWavelength": 0.05,
+    "minCameraLength": 0,
+    "maxCameraLength": 10,
+    "cameraLengthStep": 1
+  }
+}
diff --git a/src/presets/detectors.json b/src/presets/detectors.json
index ce76ceb..ec197fe 100644
--- a/src/presets/detectors.json
+++ b/src/presets/detectors.json
@@ -9,14 +9,40 @@
       "height": 0.172
     }
   },
-  "long boy": {
+  "Pilatus P3-2M-DLS (for WAXS)": {
     "resolution": {
       "width": 1475,
-      "height": 679
+      "height": 1679
+    },
+    "pixelSize": {
+      "width": 0.172,
+      "height": 0.172
+    }
+  },
+  "Pilatus6m": {
+    "resolution": {
+      "width": 2527,
+      "height": 2463
+    },
+    "pixelSize": {
+      "width": 0.172,
+      "height": 0.172
+    },
+    "mask": {
+      "horizontalModules": 12,
+      "verticalModules": 5,
+      "horizontalGap": 17,
+      "verticalGap": 7
+    }
+  },
+  "Eiger 16M": {
+    "resolution": {
+      "width": 4150,
+      "height": 4371
     },
     "pixelSize": {
-      "width": 0.2,
-      "height": 0.2
+      "width": 7.5e-2,
+      "height": 7.5e-2
     }
   }
 }
diff --git a/src/presets/preset.test.ts b/src/presets/preset.test.ts
index a015a9c..4c86b42 100644
--- a/src/presets/preset.test.ts
+++ b/src/presets/preset.test.ts
@@ -1,38 +1,46 @@
 import { expect, test } from "vitest";
-import { defaultConfig, detectorList, presetList } from "./presetManager";
+import {
+  beamlineRecord,
+  detectorRecord,
+  presetConfigRecord,
+} from "./presetManager";
 
-test("Test detectors exist and are valid", () => {
-  expect(detectorList).toBeTruthy();
-  for (const detector in detectorList) {
-    expect(detectorList[detector]).toHaveProperty("resolution.width");
-    expect(detectorList[detector]).toHaveProperty("resolution.height");
-    expect(detectorList[detector]).toHaveProperty("pixelSize.width");
-    expect(detectorList[detector]).toHaveProperty("pixelSize.height");
+test("Test detectors exist detectors are valid", () => {
+  expect(detectorRecord).toBeTruthy();
+  for (const detector in detectorRecord) {
+    expect(detectorRecord[detector]).toHaveProperty("resolution.width");
+    expect(detectorRecord[detector]).toHaveProperty("resolution.height");
+    expect(detectorRecord[detector]).toHaveProperty("pixelSize.width");
+    expect(detectorRecord[detector]).toHaveProperty("pixelSize.height");
   }
 });
 
-test("Test beamstop and camera tube are valid", () => {
-  for (const preset in presetList) {
-    expect(presetList[preset]).toHaveProperty("beamstop.diameter");
-    expect(presetList[preset]).toHaveProperty("beamstop.centre.x");
-    expect(presetList[preset]).toHaveProperty("beamstop.centre.y");
-    expect(presetList[preset]).toHaveProperty("beamstop.clearance");
-    expect(presetList[preset]).toHaveProperty("cameraTube.centre.x");
-    expect(presetList[preset]).toHaveProperty("cameraTube.centre.y");
-    expect(presetList[preset]).toHaveProperty("cameraTube.diameter");
+test("Test beamlines exist and are valid", () => {
+  expect(beamlineRecord).toBeTruthy();
+  for (const beamline in beamlineRecord) {
+    expect(beamlineRecord[beamline]).toHaveProperty("beamstopDiameter");
+    expect(beamlineRecord[beamline]).toHaveProperty("cameratubeDiameter");
+    expect(beamlineRecord[beamline]).toHaveProperty("minWavelength");
+    expect(beamlineRecord[beamline]).toHaveProperty("maxWavelength");
+    expect(beamlineRecord[beamline]).toHaveProperty("minCameraLength");
+    expect(beamlineRecord[beamline]).toHaveProperty("maxCameraLength");
+    expect(beamlineRecord[beamline]).toHaveProperty("cameraLengthStep");
   }
 });
 
-test("Test presets exist and are valid", () => {
-  expect(presetList).toBeTruthy();
-  expect(defaultConfig).toBeTruthy();
-  for (const preset in presetList) {
-    expect(Object.keys(detectorList)).toContain(presetList[preset].detector);
-    expect(presetList[preset]).toHaveProperty("angle");
-    expect(presetList[preset]).toHaveProperty("cameraLength");
-    expect(presetList[preset]).toHaveProperty("minWavelength");
-    expect(presetList[preset]).toHaveProperty("maxWavelength");
-    expect(presetList[preset]).toHaveProperty("minCameraLength");
-    expect(presetList[preset]).toHaveProperty("maxCameraLength");
+test("Test that app presets are valid", () => {
+  expect(presetConfigRecord).toBeTruthy();
+  for (const config in presetConfigRecord) {
+    expect(Object.keys(detectorRecord)).toContain(
+      presetConfigRecord[config].detector,
+    );
+    expect(Object.keys(beamlineRecord)).toContain(
+      presetConfigRecord[config].beamline,
+    );
+    expect(presetConfigRecord[config]).toHaveProperty("beamstop.centre.x");
+    expect(presetConfigRecord[config]).toHaveProperty("beamstop.centre.y");
+    expect(presetConfigRecord[config]).toHaveProperty("beamstop.clearance");
+    expect(presetConfigRecord[config]).toHaveProperty("cameraTube.centre.x");
+    expect(presetConfigRecord[config]).toHaveProperty("cameraTube.centre.y");
   }
 });
diff --git a/src/presets/presetConfigs.json b/src/presets/presetConfigs.json
index 50e4bb2..d4ae4f3 100644
--- a/src/presets/presetConfigs.json
+++ b/src/presets/presetConfigs.json
@@ -1,54 +1,36 @@
 {
   "I22 SAXS Isotropic": {
     "detector": "Pilatus P3-2M",
+    "beamline": "I22",
     "beamstop": {
       "centre": {
         "x": 738,
         "y": 100
       },
-      "diameter": 4,
       "clearance": 10
     },
     "cameraTube": {
       "centre": {
         "x": 738,
         "y": 840
-      },
-      "diameter": 310
-    },
-    "angle": 90,
-    "wavelength": null,
-    "cameraLength": 1.9,
-    "minWavelength": 0.062,
-    "maxWavelength": 0.335,
-    "minCameraLength": 1.9,
-    "maxCameraLength": 9.9,
-    "cameraLengthStep": 0.25
+      }
+    }
   },
   "I22 SAXS Anisotropic": {
     "detector": "Pilatus P3-2M",
+    "beamline": "I22",
     "beamstop": {
       "centre": {
         "x": 738,
         "y": 840
       },
-      "diameter": 4,
       "clearance": 10
     },
     "cameraTube": {
       "centre": {
         "x": 738,
         "y": 840
-      },
-      "diameter": 310
-    },
-    "angle": 90,
-    "wavelength": null,
-    "cameraLength": 1.9,
-    "minWavelength": 0.062,
-    "maxWavelength": 0.335,
-    "minCameraLength": 1.9,
-    "maxCameraLength": 9.9,
-    "cameraLengthStep": 0.25
+      }
+    }
   }
 }
diff --git a/src/presets/presetManager.ts b/src/presets/presetManager.ts
index bfe738e..ee38780 100644
--- a/src/presets/presetManager.ts
+++ b/src/presets/presetManager.ts
@@ -1,91 +1,100 @@
-import {unit} from "mathjs";
-import detectorDataRecord from "../presets/detectors.json";
-import presetData from "../presets/presetConfigs.json";
+import { unit } from "mathjs";
+import detectorData from "./detectors.json";
+import presetConfigData from "./presetConfigs.json";
+import beamlineData from "./beamlines.json";
 import {
-  BeamlineConfig,
-  Beamstop,
-  CircularDevice,
-  Detector,
-  SimpleVector2,
+  AppBeamline,
+  AppDetector,
+  AppConfig,
+  IOBeamline,
+  IODetector,
+  IOPresetConfig,
 } from "../utils/types";
 
-export interface AppDataFormat extends BeamlineConfig {
-  detector: string;
-  beamstop: Beamstop;
-  cameraTube: CircularDevice;
-  // todo use OOP composition over inheritance
-  // https://en.wikipedia.org/wiki/Composition_over_inheritance
-  // beamlineConfig: BeamlineConfig;
-}
-
-interface DetectorData {
-  readonly resolution: { height: number; width: number };
-  readonly pixelSize: { height: number; width: number };
+/**
+ * Creates an internal detector with pixel size units from an IODetector
+ * @param detectorData IOdetector input
+ * @returns AppDetector output
+ */
+export function createInternalDetector(detectorData: IODetector): AppDetector {
+  return {
+    ...detectorData,
+    pixelSize: {
+      height: unit(detectorData.pixelSize.height, "mm"),
+      width: unit(detectorData.pixelSize.height, "mm"),
+    },
+  };
 }
 
-interface CircularDeviceData {
-  readonly centre: SimpleVector2;
-  readonly diameter: number;
-}
+/**
+ * Holds all the preset detectors as AppDetectors
+ */
+export const detectorRecord: Record<string, AppDetector> = Object.fromEntries(
+  Object.entries(detectorData as Record<string, IODetector>).map(
+    ([key, value]) => [key, createInternalDetector(value)],
+  ),
+);
 
-export interface BeamlineData {
-  readonly angle: number | null;
-  readonly cameraLength: number | null;
-  readonly minWavelength: number;
-  readonly maxWavelength: number;
-  readonly minCameraLength: number;
-  readonly maxCameraLength: number;
-  readonly wavelength: number | null;
-  readonly cameraLengthStep: number;
+/**
+ * Creates an internal beamline with units from an IODetector
+ * @param beamlineData Input IOBeamline
+ * @returns AppBeamline with correct data
+ */
+export function createInternalBeamline(beamlineData: IOBeamline): AppBeamline {
+  return {
+    cameratubeDiameter: beamlineData.cameratubeDiameter,
+    beamstopDiameter: beamlineData.beamstopDiameter,
+    // Solution to units not being properly initialised
+    minWavelength: unit(beamlineData.minWavelength, "nm").to("nm"),
+    maxWavelength: unit(beamlineData.maxWavelength, "nm").to("nm"),
+    minCameraLength: unit(beamlineData.minCameraLength, "m"),
+    maxCameraLength: unit(beamlineData.maxCameraLength, "m"),
+    cameraLengthStep: unit(beamlineData.cameraLengthStep, "m"),
+  };
 }
 
-interface BeamstopData extends CircularDeviceData {
-  readonly clearance: number | null;
-}
+/**
+ * Holds all the preset beamlines as AppBeamlines
+ */
+export const beamlineRecord: Record<string, AppBeamline> = Object.fromEntries(
+  Object.entries(beamlineData as Record<string, IOBeamline>).map(
+    ([key, value]) => [key, createInternalBeamline(value)],
+  ),
+);
 
-export interface AppData extends BeamlineData {
-  readonly detector: string;
-  readonly beamstop: BeamstopData;
-  readonly cameraTube: CircularDeviceData;
+/**
+ * Creates internal AppConfig from IOPresetConfig
+ * @param preset input IOPresetConfig
+ * @returns
+ */
+function createPresetConfigRecord(preset: IOPresetConfig): AppConfig {
+  return {
+    ...preset,
+    beamstop: {
+      ...preset.beamstop,
+      diameter: unit(beamlineRecord[preset.beamline].beamstopDiameter, "mm"),
+    },
+    cameraTube: {
+      ...preset.cameraTube,
+      diameter: unit(beamlineRecord[preset.beamline].cameratubeDiameter, "mm"),
+    },
+    wavelength: unit(NaN, "nm"),
+    angle: unit(90, "deg"),
+    cameraLength: beamlineRecord[preset.beamline].minCameraLength.toNumber("m"),
+  };
 }
 
-export const detectorList: Record<string, Detector> = Object.fromEntries(
-  Object.entries(detectorDataRecord as Record<string, DetectorData>).map(
-    ([key, value]) => [
-      key,
-      {
-        ...value,
-        pixelSize: {
-          height: unit(value.pixelSize.height, "mm"),
-          width: unit(value.pixelSize.height, "mm"),
-        },
-      },
-    ],
+/**
+ * Holds the internal app configurations
+ */
+export const presetConfigRecord: Record<string, AppConfig> = Object.fromEntries(
+  Object.entries(presetConfigData as Record<string, IOPresetConfig>).map(
+    ([key, value]) => [key, createPresetConfigRecord(value)],
   ),
 );
 
-export const presetList: Record<string, AppDataFormat> = Object.fromEntries(
-  Object.entries(presetData as Record<string, AppData>).map(([key, value]) => [
-    key,
-    {
-      ...value,
-      beamstop: {
-        ...value.beamstop,
-        diameter: unit(value.beamstop.diameter, "mm"),
-      },
-      cameraTube: {
-        ...value.cameraTube,
-        diameter: unit(value.cameraTube.diameter, "mm"),
-      },
-      minWavelength: unit(value.minWavelength, "nm"),
-      maxWavelength: unit(value.maxWavelength, "nm"),
-      minCameraLength: unit(value.minCameraLength, "m"),
-      maxCameraLength: unit(value.maxCameraLength, "m"),
-      cameraLengthStep: unit(value.cameraLengthStep, "m"),
-
-      wavelength: unit(value.wavelength ?? NaN, "nm"),
-      angle: unit(value.angle ?? NaN, "deg"),
-    },
-  ]),
-);
-export const defaultConfig = presetList[Object.keys(presetList)[0]];
+/**
+ * Sets how the app is configured by default
+ */
+export const defaultConfig =
+  presetConfigRecord[Object.keys(presetConfigRecord)[0]];
diff --git a/src/results/rangeTable.tsx b/src/results/rangeTable.tsx
index eed6a2a..1bd1dfb 100644
--- a/src/results/rangeTable.tsx
+++ b/src/results/rangeTable.tsx
@@ -1,13 +1,11 @@
 import {
-  Box,
+  Card,
   FormControl,
   InputLabel,
   MenuItem,
-  Paper,
   Select,
   SelectChangeEvent,
   Table,
-  TableBody,
   TableCell,
   TableContainer,
   TableHead,
@@ -49,35 +47,35 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
     .to(resultsStore.dUnits as string);
 
   return (
-    <Box flexGrow={1} >
-      <TableContainer component={Paper}>
+    <Card variant="outlined" sx={{ maxWidth: "30vw" }}>
+      <TableContainer>
         <Table sx={{ minWidth: 50 }} aria-label="simple table" size="small">
           {/* TABLE HEAD */}
           <TableHead>
             <TableRow>
-              <TableCell>Values</TableCell>
-              <TableCell align="right">Min</TableCell>
-              <TableCell align="right">Max</TableCell>
-              <TableCell align="right">Units</TableCell>
+              <TableCell align="center">Values</TableCell>
+              <TableCell align="center">Min</TableCell>
+              <TableCell align="center">Max</TableCell>
+              <TableCell align="center">Units</TableCell>
             </TableRow>
           </TableHead>
           {/* TABLE BODY */}
           <TableRow key={"q"}>
             {/* Q RANGE ROW */}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.q}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(qRange.min.toNumber())
                 ? ""
                 : qRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(qRange.max.toNumber())
                 ? ""
                 : qRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>q</InputLabel>
                 <Select
@@ -98,20 +96,20 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
           </TableRow>
           <TableRow key={"s"}>
             {/* S RANGE ROW*/}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.s}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(sRange.min.toNumber())
                 ? ""
                 : sRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(sRange.max.toNumber())
                 ? ""
                 : sRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>s</InputLabel>
                 <Select
@@ -132,20 +130,20 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
           </TableRow>
           <TableRow key={"d"}>
             {/* D RANGE ROW*/}
-            <TableCell component="th" scope="row">
+            <TableCell component="th" scope="row" align="center">
               {ScatteringOptions.d}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(dRange.min.toNumber())
                 ? ""
                 : dRange.min.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               {isNaN(dRange.max.toNumber())
                 ? ""
                 : dRange.max.toNumber().toFixed(4)}
             </TableCell>
-            <TableCell align="right">
+            <TableCell align="center">
               <FormControl>
                 <InputLabel>d</InputLabel>
                 <Select
@@ -164,9 +162,8 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
               </FormControl>
             </TableCell>
           </TableRow>
-          <TableBody></TableBody>
         </Table>
       </TableContainer>
-    </Box>
+    </Card>
   );
 }
diff --git a/src/results/resultsBar.tsx b/src/results/resultsBar.tsx
index b56c244..e78143f 100644
--- a/src/results/resultsBar.tsx
+++ b/src/results/resultsBar.tsx
@@ -1,5 +1,4 @@
 import {
-  Box,
   Card,
   CardContent,
   Divider,
@@ -161,69 +160,64 @@ export default function ResultsBar({
 
   const units = displayUnits(textBoxUnits);
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <Card sx={{ height: 1 }}>
-        <CardContent>
-          <Stack spacing={1}>
-            <Typography variant="h6"> Results</Typography>
-            <Divider />
-            <Stack direction={"row"} spacing={3}>
-              <RangeTable qRange={visableQRange} />
-              <Divider orientation="vertical" />
-              {/* SOME SECTION TITLE */}
-              <Stack flexGrow={2}>
-                <Stack spacing={1}>
-                  <Stack direction={"row"} spacing={3}>
-                    <Stack spacing={2}>
-                      <Stack direction={"row"} spacing={2}>
-                        <TextField
-                          type="number"
-                          label={`Requested min ${resultStore.requested} value`}
-                          size="small"
-                          value={resultStore.requestedMin}
-                          onChange={handleRequestedMin}
-                          InputProps={{
-                            endAdornment: (
-                              <InputAdornment position="end">
-                                {units}
-                              </InputAdornment>
-                            ),
-                          }}
-                        />
-                      </Stack>
-                      <Stack direction={"row"} spacing={2}>
-                        <TextField
-                          type="number"
-                          label={`Requested max ${resultStore.requested} value`}
-                          size="small"
-                          value={resultStore.requestedMax}
-                          onChange={handleRequestedMax}
-                          InputProps={{
-                            endAdornment: (
-                              <InputAdornment position="end">
-                                {units}
-                              </InputAdornment>
-                            ),
-                          }}
-                        />
-                      </Stack>
-                    </Stack>
-                    <RangeFormControl resultStore={resultStore} />
-                  </Stack>
-                </Stack>
-                {diagramVisible && diagramFull && diagramRequested ? (
-                  <RangeDiagram
-                    visibleRange={diagramVisible satisfies UnitRange}
-                    requestedRange={diagramRequested}
-                  />
-                ) : (
-                  <MessageDiagram message="No solution" />
-                )}
-              </Stack>
+    <Card
+      variant="outlined"
+      sx={{
+        height: 1,
+        maxHeight: "30vh",
+        overflow: "scroll",
+        flexGrow: 1,
+      }}
+    >
+      <CardContent>
+        <Stack spacing={1}>
+          <Typography variant="h6"> Results</Typography>
+          <Divider />
+          <Stack direction={"row"} spacing={2}>
+            {/* Range Table */}
+            <RangeTable qRange={visableQRange} />
+            {/* Requested Range */}
+            <Stack direction={"column"} spacing={1}>
+              <RangeFormControl resultStore={resultStore} />
+              <TextField
+                type="number"
+                label={`Requested min ${resultStore.requested} value`}
+                size="small"
+                value={resultStore.requestedMin}
+                onChange={handleRequestedMin}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">{units}</InputAdornment>
+                  ),
+                }}
+              />
+              <TextField
+                type="number"
+                label={`Requested max ${resultStore.requested} value`}
+                size="small"
+                value={resultStore.requestedMax}
+                onChange={handleRequestedMax}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">{units}</InputAdornment>
+                  ),
+                }}
+              />
+            </Stack>
+            {/* Range Diagram */}
+            <Stack flexGrow={2} sx={{ alignItems: "center" }}>
+              {diagramVisible && diagramFull && diagramRequested ? (
+                <RangeDiagram
+                  visibleRange={diagramVisible satisfies UnitRange}
+                  requestedRange={diagramRequested}
+                />
+              ) : (
+                <MessageDiagram message="No solution" />
+              )}
             </Stack>
           </Stack>
-        </CardContent>
-      </Card>
-    </Box>
+        </Stack>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/utils/colourPicker.tsx b/src/utils/colourPicker.tsx
index 16f164f..7b2d4ac 100644
--- a/src/utils/colourPicker.tsx
+++ b/src/utils/colourPicker.tsx
@@ -5,6 +5,11 @@ import { IconButton } from "@mui/material";
 import { color2String } from "../plot/plotUtils";
 import SquareIcon from "@mui/icons-material/Square";
 
+/**
+ * Renders a popover componenet with a color picker from react-color
+ * @param props The current colour value, and change callback
+ * @returns
+ */
 export default function ColourPickerPopover(props: {
   color: RGBColor;
   onChangeComplete: (color: ColorResult) => void;
@@ -34,7 +39,7 @@ export default function ColourPickerPopover(props: {
         onClose={handleClose}
         anchorOrigin={{
           vertical: "bottom",
-          horizontal: "left",
+          horizontal: "right",
         }}
       >
         <SketchPicker
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 778d9a2..d4af3e8 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,31 +1,118 @@
 import { Unit } from "mathjs";
 
-export interface Detector {
-  readonly resolution: { height: number; width: number };
-  readonly pixelSize: { height: Unit; width: Unit };
-}
-
+/**
+ * Represnts a simple vector
+ */
 export interface SimpleVector2 {
   x?: number | null;
   y?: number | null;
 }
 
-export interface CircularDevice {
+/**
+ *  Internal Detector type
+ */
+export interface AppDetector {
+  readonly resolution: { height: number; width: number };
+  readonly pixelSize: { height: Unit; width: Unit };
+}
+
+/**
+ * Internal Circular Device (eg Camera Tube or Beamstop)
+ */
+export interface AppCircularDevice {
   centre: SimpleVector2;
   diameter: Unit;
 }
 
-export interface Beamstop extends CircularDevice {
+/**
+ * Internal Beamstop type
+ */
+export interface AppBeamstop extends AppCircularDevice {
   clearance: number | null;
 }
 
-export interface BeamlineConfig {
-  angle: Unit;
-  cameraLength: number | null;
+/**
+ * Internal Beamline type (contains all immutable information about a beamline)
+ */
+export interface AppBeamline {
+  readonly beamstopDiameter: number;
+  readonly cameratubeDiameter: number;
   readonly minWavelength: Unit;
   readonly maxWavelength: Unit;
   readonly minCameraLength: Unit;
   readonly maxCameraLength: Unit;
-  wavelength: Unit;
   readonly cameraLengthStep: Unit;
 }
+
+/**
+ * Internal Full AppConfig
+ */
+export interface AppConfig {
+  detector: string;
+  beamstop: AppBeamstop;
+  cameraTube: AppCircularDevice;
+  beamline: string;
+  wavelength: Unit;
+  angle: Unit;
+  cameraLength: number | null;
+}
+
+/**
+ * External Detector type used in IO
+ */
+export interface IODetector {
+  readonly resolution: { height: number; width: number };
+  readonly pixelSize: { height: number; width: number };
+}
+
+/**
+ * External CircularTube type used in IO
+ */
+export interface IOCircularDevice {
+  readonly centre: SimpleVector2;
+}
+
+/**
+ * External Beamline type for use in
+ */
+export interface IOBeamline {
+  readonly beamstopDiameter: number;
+  readonly cameratubeDiameter: number;
+  readonly minWavelength: number;
+  readonly maxWavelength: number;
+  readonly minCameraLength: number;
+  readonly maxCameraLength: number;
+  readonly cameraLengthStep: number;
+}
+
+/**
+ * External Beamstop type
+ */
+export interface IOBeamstop extends IOCircularDevice {
+  readonly clearance: number | null;
+}
+
+/**
+ * External Preset Config type
+ */
+export interface IOPresetConfig {
+  readonly detector: string;
+  readonly beamline: string;
+  readonly beamstop: IOBeamstop;
+  readonly cameraTube: IOCircularDevice;
+}
+
+export interface BeamlineConfig {
+  beamline: AppBeamline;
+  wavelength: Unit;
+  angle: Unit;
+  cameraLength: number | null;
+}
+
+export interface DetectorMask {
+  readonly horizontalModules: number;
+  readonly verticalModules: number;
+  readonly horizontalGap: number;
+  readonly verticalGap: number;
+  readonly missingModules?: number[];
+}
diff --git a/src/utils/units.ts b/src/utils/units.ts
index 57753de..48a7f15 100644
--- a/src/utils/units.ts
+++ b/src/utils/units.ts
@@ -1,24 +1,38 @@
-import * as mathjs from "mathjs";
+import { Unit, unit, multiply, divide } from "mathjs";
 
-export const CSPEED = mathjs.unit(299792458, "m/s");
-export const PLANCK = mathjs.unit(6.62607015e-34, "J s");
+// Useful constants
+export const CSPEED = unit(299792458, "m/s");
+export const PLANCK = unit(6.62607015e-34, "J s");
 
-export enum DistanceUnits {
+// Refer to https://mathjs.org/docs/datatypes/units.html for unit strings
+
+/**
+ * An Enum of the Length Units that the app supports
+ */
+export enum LengthUnits {
   millimetre = "mm",
   micrometre = "um",
 }
 
+/**
+ * An Enum of the Energy Units That the app supports
+ */
 export enum EnergyUnits {
   electronVolts = "eV",
   kiloElectronVolts = "keV",
 }
 
+/**
+ * An Enum of the Wavelength Units that the app supports
+ */
 export enum WavelengthUnits {
-  // todo is this a typo for nanometers?
   nanometres = "nm",
   angstroms = "angstrom",
 }
 
+/**
+ *
+ */
 export enum ReciprocalWavelengthUnits {
   nanometres = "nm^-1",
   angstroms = `angstrom^-1`,
@@ -30,27 +44,14 @@ export enum AngleUnits {
 }
 
 /**
- * An interface to keep track of all units in the app
- */
-export interface UnitConfig {
-  pixelSizeUnits: DistanceUnits;
-  beamEnergyUnits: EnergyUnits;
-  beamstopDiameterUnits: DistanceUnits;
-  cameraDiameterUnits: DistanceUnits;
-  wavelengthUnits: WavelengthUnits;
-  angleUnits: AngleUnits;
-}
-
-/**
- * Converts energy in kilo elctronvolts to wavelength in nm
+ * Converts energy in kilo electronvolts to wavelength in nm
  * @param energy energy in keV
- * @returns - wavelength in nm
+ * @returns wavelength in nm
  */
-export const energy2WavelengthConverter = (energy: math.Unit): math.Unit => {
-  const result = mathjs.divide(mathjs.multiply(PLANCK, CSPEED), energy.toSI());
-
+export const energy2WavelengthConverter = (energy: Unit): Unit => {
+  const result = divide(multiply(PLANCK, CSPEED), energy.toSI());
   if (typeof result == "number" || !("units" in result)) {
-    throw TypeError("units for constants h and c are wrong");
+    throw TypeError("The Units for constants h and c are wrong");
   }
   return result;
 };
@@ -60,19 +61,15 @@ export const energy2WavelengthConverter = (energy: math.Unit): math.Unit => {
  * @param wavelength in nm
  * @returns energy in keV
  */
-export const wavelength2EnergyConverter = (
-  wavelength: math.Unit,
-): math.Unit => {
-  const result = mathjs.divide(
-    mathjs.multiply(PLANCK, CSPEED),
-    wavelength.toSI(),
-  );
+export const wavelength2EnergyConverter = (wavelength: Unit): Unit => {
+  const result = divide(multiply(PLANCK, CSPEED), wavelength.toSI());
   if (typeof result == "number" || !("units" in result)) {
     throw TypeError("units for constants h and c are wrong");
   }
   return result;
 };
 
+// Could be dead code
 /**
  * A function to process numeric texbox inputs in a consistant way.
  * @param input input string from the texbox
@@ -88,10 +85,10 @@ export const parseNumericInput = (input: string): number | null => {
 };
 
 /**
- * Enforces given range limits
- * @param value input values
+ * Enforces as range by setting any ( < min ) to min and ( > max ) to max
  * @param min min value of the range
  * @param max max value for the range
+ * @param value input values
  * @returns
  */
 export const enforceRangeLimits = (
diff --git a/tsconfig.json b/tsconfig.json
index 55c12fc..d429999 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,12 +17,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src", "tests"],
   "references": [
     {
-      "path": "./tsconfig.node.json",
-    },
-  ],
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }