added check if the highlights.json file is missing

Author: xanthopoulakis

src/redux/highlights/reducer.js

@@ -3,6 +3,7 @@ import actions from "./actions";
 const initState = {
   loading: false,
   filename: "highlights.json",
+  highlightsMissing: true,
   data: null,
   error: null,
 };
@@ -14,18 +15,21 @@ export default function appReducer(state = initState, action) {
         ...state,
         error: null,
         data: null,
+        highlightsMissing: true,
         loading: true,
       };
     case actions.FETCH_HIGHLIGHTS_DATA_SUCCESS:
       return {
         ...state,
         data: action.data,
+        highlightsMissing: action.highlightsMissing,
         loading: false,
       };
     case actions.FETCH_HIGHLIGHTS_DATA_FAILED:
       return {
         ...state,
         error: action.error,
+        highlightsMissing: true,
         data: null,
         loading: false,
       };

src/redux/highlights/saga.js

@@ -9,16 +9,30 @@ function* fetchHighlightsData(action) {
   const { dataset } = currentState.Settings;
   const { filename } = currentState.Highlights;
   const { id } = currentState.CaseReport;
+  const highlightsUrl = `${dataset.dataPath}${id}/${filename}`;
+  
   try {
-    let responseData = yield call(
-      axios.get,
-      `${dataset.dataPath}${id}/${filename}`,
-      { cancelToken: getCancelToken() }
-    );
+    yield call(axios.head, highlightsUrl);
+    // File exists, proceed to fetch as before
+  } catch (e) {
+    // File is missing, break and dispatch highlightsMissing: true
+    yield put({
+      type: actions.FETCH_HIGHLIGHTS_DATA_SUCCESS,
+      data: null,
+      highlightsMissing: true,
+    });
+    return;
+  }
+
+  try {
+    let responseData = yield call(axios.get, highlightsUrl, {
+      cancelToken: getCancelToken(),
+    });
 
     yield put({
       type: actions.FETCH_HIGHLIGHTS_DATA_SUCCESS,
       data: responseData.data,
+      highlightsMissing: false,
     });
   } catch (error) {
     console.log(error);

src/tabs/summaryTab/index.js

@@ -21,7 +21,8 @@ import HighlightsPanel from "../../components/highlightsPanel";
 
 class SummaryTab extends Component {
   render() {
-    const { t, loading, metadata, plots, tumorPlots } = this.props;
+    const { t, loading, metadata, plots, tumorPlots, highlightsMissing } =
+      this.props;
     const { tags } = metadata;
 
     let plotsList = chunks(plots.filter((d) => !isNaN(metadata[d.id])));
@@ -32,8 +33,12 @@ class SummaryTab extends Component {
     return (
       <Wrapper>
         <Skeleton active loading={loading}>
-          <HighlightsPanel title={t("components.highlights-panel.title")} />
-          <br />
+          {!highlightsMissing && (
+            <>
+              <HighlightsPanel title={t("components.highlights-panel.title")} />
+              <br />
+            </>
+          )}
           {tagsList.length > 0 && (
             <Card
               size="small"
@@ -115,6 +120,7 @@ SummaryTab.defaultProps = {};
 const mapDispatchToProps = (dispatch) => ({});
 const mapStateToProps = (state) => ({
   loading: state.PopulationStatistics.loading,
+  highlightsMissing: state.Highlights.highlightsMissing,
   metadata: state.CaseReport.metadata,
   plots: state.PopulationStatistics.general,
   tumorPlots: state.PopulationStatistics.tumor,