[Platform]: Allow greater precision in allele frequency plot (#480)

* adapt allele frequency plot to order of magnitude

* increase fixed width of right plot column

apps/platform/src/pages/VariantPage/ProfileHeader.tsx

@@ -113,8 +113,20 @@ const populationLabels = {
   remaining_adj: 'Other',
 };
 
+
 function AlleleFrequencyPlot({ data }) {
-
+
+  let orderOfMag = -2;
+  for (const { alleleFrequency } of data) {
+    if (alleleFrequency > 0 && alleleFrequency < 1) {
+      orderOfMag = Math.min(
+        orderOfMag,
+        Math.floor(Math.log10(alleleFrequency))
+      )
+    }
+  }
+  const dps = Math.min(6, -orderOfMag + 1);
+
   // sort rows alphabetically on population label - but put "other" last
   const rows = data.map(({ populationName, alleleFrequency }) => ({
     label: populationLabels[populationName],
@@ -125,13 +137,13 @@ function AlleleFrequencyPlot({ data }) {
   return(
     <Box display="flex" flexDirection="column" gap={0.25}>
       {rows.map(row => (
-        <BarGroup dataRow={row} key={row.label}/>
+        <BarGroup dataRow={row} key={row.label} dps={dps}/>
       ))}
     </Box>
   );
 }
 
-function BarGroup({ dataRow: { label, alleleFrequency } }) {
+function BarGroup({ dataRow: { label, alleleFrequency }, dps }) {
   return (
     <Box display="flex" gap={1} alignItems="center" width="100%">
       <Typography width={170} fontSize="13.5px" variant="body2" textAlign="right">
@@ -151,8 +163,8 @@ function BarGroup({ dataRow: { label, alleleFrequency } }) {
           }}
         />
       </Box>
-      <Typography width={40} fontSize="12px" variant="body2" lineHeight={0.8}>
-        {alleleFrequency.toFixed(3)}
+      <Typography width="60px" fontSize="12px" variant="body2" lineHeight={0.8}>
+        { alleleFrequency === 0 ? 0 : alleleFrequency.toFixed(dps) }
       </Typography>
     </Box>
   );