added a check on whether the imageFile is present within the snvplicity saga to decide whether to show or hide the SNVplicity plots

Author: xanthopoulakis

src/redux/snvplicity/reducer.js

@@ -3,6 +3,8 @@ import actions from "./actions";
 const initState = {
   loading: false,
   data: null,
+  imageFile: "multiplicity.png",
+  imagePresent: false,
   error: null,
 };
 
@@ -13,18 +15,21 @@ export default function appReducer(state = initState, action) {
         ...state,
         error: null,
         data: null,
+        imagePresent: false,
         loading: true,
       };
     case actions.FETCH_SNVPLICITY_DATA_SUCCESS:
       return {
         ...state,
         data: action.data,
+        imagePresent: action.imagePresent,
         loading: false,
       };
     case actions.FETCH_SNVPLICITY_DATA_FAILED:
       return {
         ...state,
         error: action.error,
+        imagePresent: false,
         data: null,
         loading: false,
       };

src/redux/snvplicity/saga.js

@@ -10,6 +10,22 @@ export function* fetchSnvplicityData(action) {
   const currentState = yield select(getCurrentState);
   const { dataset } = currentState.Settings;
   const { id } = currentState.CaseReport;
+  const { imageFile } = currentState.Snvplicity;
+
+  // 2) Check if the image file is present
+  const imageUrl = `${dataset.dataPath}${id}/${imageFile}`;
+  try {
+    yield call(axios.head, imageUrl);
+    // If present, dispatch success with imagePresent: true and return
+    yield put({
+      type: actions.FETCH_SNVPLICITY_DATA_SUCCESS,
+      data: null,
+      imagePresent: true,
+    });
+    return;
+  } catch (e) {
+    // If not present, continue with the rest of the saga as before
+  }
 
   try {
     // 2) Prepare parallel requests
@@ -57,6 +73,7 @@ export function* fetchSnvplicityData(action) {
     yield put({
       type: actions.FETCH_SNVPLICITY_DATA_SUCCESS,
       data: binnedData,
+      imagePresent: false,
     });
   } catch (error) {
     // This catch block typically only runs if there was a fatal error

src/tabs/binQCTab/index.js

@@ -8,7 +8,7 @@ import SnvplicityPlotPanel from "../../components/snvplicityPlotPanel";
 
 class BinQcTab extends Component {
   render() {
-    const { dataset, id } = this.props;
+    const { dataset, id, imagePresent, imageFile } = this.props;
     return (
       <Wrapper>
         <Row
@@ -24,7 +24,14 @@ class BinQcTab extends Component {
           gutter={16}
         >
           <Col className="gutter-row" span={24}>
-            <SnvplicityPlotPanel />
+            {imagePresent && imageFile ? (
+              <Image
+                src={`${dataset.dataPath}${id}/${imageFile}`}
+                fallback="https://placehold.co/600x400?text=Image+not+found"
+              />
+            ) : (
+              <SnvplicityPlotPanel />
+            )}
           </Col>
         </Row>
         <Row
@@ -54,6 +61,8 @@ const mapDispatchToProps = (dispatch) => ({});
 const mapStateToProps = (state) => ({
   metadata: state.CaseReport.metadata,
   dataset: state.Settings.dataset,
+  imagePresent: state.Snvplicity.imagePresent,
+  imageFile: state.Snvplicity.imageFile,
   id: state.CaseReport.id,
 });
 export default connect(