[BIOMAGE-1036] - Smooth transition to data processing

src/components/ContentWrapper.jsx

@@ -209,6 +209,8 @@ const ContentWrapper = (props) => {
     },
   ];
 
+  const waitingForQcToLaunch = gem2sStatusKey === pipelineStatus.SUCCEEDED && pipelineStatusKey === pipelineStatus.NOT_CREATED;
+
   const renderContent = () => {
     if (experimentId) {
       if (
@@ -224,7 +226,7 @@ const ContentWrapper = (props) => {
         return <GEM2SLoadingScreen experimentId={experimentId} gem2sStatus='error' />;
       }
 
-      if (gem2sRunning) {
+      if (gem2sRunning || waitingForQcToLaunch) {
         return <GEM2SLoadingScreen gem2sStatus='running' completedSteps={completedGem2sSteps} />;
       }
 
@@ -257,7 +259,7 @@ const ContentWrapper = (props) => {
   }) => {
     const noExperimentDisable = !experimentId ? disableIfNoExperiment : false;
     const pipelineStatusDisable = disabledByPipelineStatus && (
-      backendError || pipelineRunning || pipelineRunningError
+      backendError || gem2sRunning || gem2sRunningError || waitingForQcToLaunch || pipelineRunning || pipelineRunningError
     );
 
     return (

src/utils/mathFormulas.js

@@ -0,0 +1,7 @@
+const stdev = (array) => {
+  const n = array.length;
+  const mean = array.reduce((a, b) => a + b) / n;
+  return Math.sqrt(array.map((x) => (x - mean) ** 2).reduce((a, b) => a + b) / n);
+};
+
+export default stdev;

src/utils/plotSpecs/generateFeaturesVsUMIsScatterplot.js

@@ -1,124 +1,135 @@
-const generateSpec = (config, plotData) => ({
-  $schema: 'https://vega.github.io/schema/vega/v5.json',
-  width: config.dimensions.width,
-  height: config.dimensions.height,
-  autosize: { type: 'fit', resize: true },
-  padding: 5,
+import calculateStdev from '../mathFormulas';
 
-  data: [
-    {
-      name: 'plotData',
-      values: plotData,
-      transform: [
-        {
-          type: 'filter',
-          expr: "datum['log_genes'] != null && datum['log_molecules'] != null",
-        },
-      ],
-    },
-  ],
+const generateSpec = (config, plotData) => {
+  const stdev = calculateStdev(plotData.map((p) => p.log_genes));
+  const lowerCutoff = Math.min(...plotData.map((p) => p.lower_cutoff)) - stdev;
+  const upperCutoff = Math.max(...plotData.map((p) => p.upper_cutoff)) + stdev;
+
+  return {
+    $schema: 'https://vega.github.io/schema/vega/v5.json',
+    width: config.dimensions.width,
+    height: config.dimensions.height,
+    autosize: { type: 'fit', resize: true },
+    padding: 5,
+
+    data: [
+      {
+        name: 'plotData',
+        values: plotData,
+        transform: [
+          {
+            type: 'filter',
+            expr: "datum['log_genes'] != null && datum['log_molecules'] != null",
+          },
+          {
+            type: 'filter',
+            expr: `datum.log_genes >= ${lowerCutoff} && datum.log_genes <= ${upperCutoff}`,
+          },
+        ],
+      },
+    ],
 
-  scales: [
-    {
-      name: 'x',
-      type: 'linear',
-      round: true,
-      zero: false,
-      domain: { data: 'plotData', field: 'log_molecules' },
-      range: 'width',
-    },
-    {
-      name: 'y',
-      type: 'linear',
-      round: true,
-      zero: false,
-      domain: [
-        Math.min(...plotData.map((p) => p.lower_cutoff)),
-        Math.max(...plotData.map((p) => p.upper_cutoff)),
-      ],
-      range: 'height',
-    },
-  ],
+    scales: [
+      {
+        name: 'x',
+        type: 'linear',
+        round: true,
+        zero: false,
+        domain: { data: 'plotData', field: 'log_molecules' },
+        range: 'width',
+      },
+      {
+        name: 'y',
+        type: 'linear',
+        round: true,
+        zero: false,
+        domain: [
+          lowerCutoff,
+          upperCutoff,
+        ],
+        range: 'height',
+      },
+    ],
 
-  axes: [
-    {
-      scale: 'x',
-      grid: true,
-      domain: false,
-      orient: 'bottom',
-      tickCount: 5,
-      zindex: 1,
-      title: { value: config.axes.xAxisText },
-      titleFont: { value: config.fontStyle.font },
-      labelFont: { value: config.fontStyle.font },
-      titleFontSize: { value: config.axes.titleFontSize },
-      labelFontSize: { value: config.axes.labelFontSize },
-      offset: { value: config.axes.offset },
-      gridOpacity: { value: (config.axes.gridOpacity / 20) },
-    },
-    {
-      scale: 'y',
-      grid: true,
-      domain: false,
-      orient: 'left',
-      titlePadding: 5,
-      zindex: 1,
-      title: { value: config.axes.yAxisText },
-      titleFont: { value: config.fontStyle.font },
-      labelFont: { value: config.fontStyle.font },
-      titleFontSize: { value: config.axes.titleFontSize },
-      labelFontSize: { value: config.axes.labelFontSize },
-      offset: { value: config.axes.offset },
-      gridOpacity: { value: (config.axes.gridOpacity / 20) },
-    },
-  ],
+    axes: [
+      {
+        scale: 'x',
+        grid: true,
+        domain: false,
+        orient: 'bottom',
+        tickCount: 5,
+        zindex: 1,
+        title: { value: config.axes.xAxisText },
+        titleFont: { value: config.fontStyle.font },
+        labelFont: { value: config.fontStyle.font },
+        titleFontSize: { value: config.axes.titleFontSize },
+        labelFontSize: { value: config.axes.labelFontSize },
+        offset: { value: config.axes.offset },
+        gridOpacity: { value: (config.axes.gridOpacity / 20) },
+      },
+      {
+        scale: 'y',
+        grid: true,
+        domain: false,
+        orient: 'left',
+        titlePadding: 5,
+        zindex: 1,
+        title: { value: config.axes.yAxisText },
+        titleFont: { value: config.fontStyle.font },
+        labelFont: { value: config.fontStyle.font },
+        titleFontSize: { value: config.axes.titleFontSize },
+        labelFontSize: { value: config.axes.labelFontSize },
+        offset: { value: config.axes.offset },
+        gridOpacity: { value: (config.axes.gridOpacity / 20) },
+      },
+    ],
 
-  marks: [
-    {
-      name: 'marks',
-      type: 'symbol',
-      from: { data: 'plotData' },
-      encode: {
-        update: {
-          x: { scale: 'x', field: 'log_molecules' },
-          y: { scale: 'y', field: 'log_genes' },
-          size: { value: 15 },
-          strokeWidth: { value: 2 },
-          opacity: { value: 0.9 },
-          fill: { value: 'blue' },
+    marks: [
+      {
+        name: 'marks',
+        type: 'symbol',
+        from: { data: 'plotData' },
+        encode: {
+          update: {
+            x: { scale: 'x', field: 'log_molecules' },
+            y: { scale: 'y', field: 'log_genes' },
+            size: { value: 15 },
+            strokeWidth: { value: 2 },
+            opacity: { value: 0.9 },
+            fill: { value: 'blue' },
+          },
         },
       },
-    },
-    {
-      type: 'rule',
-      encode: {
-        update: {
-          x: { scale: 'x', value: plotData[0].log_molecules },
-          y: { scale: 'y', value: plotData[0].lower_cutoff },
-          x2: { scale: 'x', value: plotData[plotData.length - 1].log_molecules },
-          y2: { scale: 'y', value: plotData[plotData.length - 1].lower_cutoff },
-          strokeWidth: { value: 2 },
-          strokeDash: { value: [8, 4] },
-          stroke: { value: 'red' },
+      {
+        type: 'rule',
+        encode: {
+          update: {
+            x: { scale: 'x', value: plotData[0].log_molecules },
+            y: { scale: 'y', value: plotData[0].lower_cutoff },
+            x2: { scale: 'x', value: plotData[plotData.length - 1].log_molecules },
+            y2: { scale: 'y', value: plotData[plotData.length - 1].lower_cutoff },
+            strokeWidth: { value: 2 },
+            strokeDash: { value: [8, 4] },
+            stroke: { value: 'red' },
+          },
         },
       },
-    },
-    {
-      type: 'rule',
-      encode: {
-        update: {
-          x: { scale: 'x', value: plotData[0].log_molecules },
-          y: { scale: 'y', value: plotData[0].upper_cutoff },
-          x2: { scale: 'x', value: plotData[plotData.length - 1].log_molecules },
-          y2: { scale: 'y', value: plotData[plotData.length - 1].upper_cutoff },
-          strokeWidth: { value: 2 },
-          strokeDash: { value: [8, 4] },
-          stroke: { value: 'red' },
+      {
+        type: 'rule',
+        encode: {
+          update: {
+            x: { scale: 'x', value: plotData[0].log_molecules },
+            y: { scale: 'y', value: plotData[0].upper_cutoff },
+            x2: { scale: 'x', value: plotData[plotData.length - 1].log_molecules },
+            y2: { scale: 'y', value: plotData[plotData.length - 1].upper_cutoff },
+            strokeWidth: { value: 2 },
+            strokeDash: { value: [8, 4] },
+            stroke: { value: 'red' },
+          },
         },
       },
-    },
-  ],
-  title:
+    ],
+    title:
   {
     text: { value: config.title.text },
     color: { value: config.colour.masterColour },
@@ -127,6 +138,7 @@ const generateSpec = (config, plotData) => ({
     dx: { value: config.title.dx },
     fontSize: { value: config.title.fontSize },
   },
-});
+  };
+};
 
 export default generateSpec;