Merge pull request #58 from tizayi/detector

fix range diagram text
DiamondLightSource · Jan 9, 2024 · 88e814b · 88e814b
2 parents 6dbf8a4 + 872204a
commit 88e814b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/src/results/rangeDiagram.tsx b/src/results/rangeDiagram.tsx
@@ -1,8 +1,5 @@
 import UnitRange from "../calculations/unitRange";
 
-// keeping the text visible
-const ESTIMATED_TEXT_LENGTH = 14;
-
 export function MessageDiagram(props: { message: string }): JSX.Element {
   return (
     <svg
@@ -39,11 +36,8 @@ export function RangeDiagram(props: {
    * @param requestedValue - how far on the diagram to plot
    * @returns 
    */
-  const keepTextVisible = (requestedValue: number): number => {
-    if (requestedValue < 50) {
-      return requestedValue;
-    }
-    return requestedValue - ESTIMATED_TEXT_LENGTH;
+  const getTextAnchor = (requestedValue: number): string => {
+    return requestedValue < 50 ? "start" : "end";
   }
 
 
@@ -71,11 +65,11 @@ export function RangeDiagram(props: {
         y2="60%"
         style={{ stroke: "black", strokeWidth: 2 }}
       />
-      <text y="60%" x={`${keepTextVisible(requestedMin)}%`}>
+      <text y="60%" x={`${requestedMin}%`} textAnchor={getTextAnchor(requestedMin)}>
         {" "}
         Requested min
       </text>
-      <text y="80%" x={`${keepTextVisible(requestedMax)}%`}>
+      <text y="80%" x={`${requestedMax}%`} textAnchor={getTextAnchor(requestedMax)}>
         Requested max
       </text>
     </svg>

diff --git a/src/results/resultsBar.tsx b/src/results/resultsBar.tsx
@@ -113,7 +113,7 @@ export default function ResultsBar(props: {
               <Stack flexGrow={2}>
                 <Stack spacing={1}>
                   <Stack direction={"row"} spacing={3}>
-                    <Stack spacing={1}>
+                    <Stack spacing={2}>
                       <Stack direction={"row"} spacing={2}>
                         <Typography>
                           Requested min {resultStore.requested} value:{" "}