Resolve "report-fetch-with-buffer"

ComPlat · Nov 26, 2019 · 51ce7aa · 51ce7aa
1 parent 587702b
commit 51ce7aa
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 4 deletions.
diff --git a/app/assets/javascripts/components/actions/ReportActions.js b/app/assets/javascripts/components/actions/ReportActions.js
@@ -156,6 +156,10 @@ class ReportActions {
         });
     };
   }
+
+  changeUi(current) {
+    return current;
+  }
 }
 
 export default alt.createActions(ReportActions);
diff --git a/app/assets/javascripts/components/report/ReportComponent.js b/app/assets/javascripts/components/report/ReportComponent.js
@@ -47,7 +47,7 @@ const generateReport = (allState, updateQueue) => {
 
 const GenerateReportBtn = ({ allState, updateQueue }) => {
   const { selectedObjTags, defaultObjTags, splSettings, rxnSettings,
-    processingReport } = allState;
+    processingReport, previewLoading } = allState;
 
   const hasObj = [...selectedObjTags.sampleIds,
     ...selectedObjTags.reactionIds, ...defaultObjTags.sampleIds,
@@ -68,7 +68,7 @@ const GenerateReportBtn = ({ allState, updateQueue }) => {
         bsStyle="primary"
         bsSize="xsmall"
         className="button-right"
-        disabled={!(showGeneReportBtn && hasObj)}
+        disabled={!(showGeneReportBtn && hasObj && !previewLoading)}
         onClick={onClick}
       >
         <span><i className="fa fa-file-text-o" /> Generate</span>

diff --git a/app/assets/javascripts/components/report/ReportContainer.js b/app/assets/javascripts/components/report/ReportContainer.js
@@ -22,6 +22,7 @@ export default class ReportContainer extends Component {
     this.onChangeUI = this.onChangeUI.bind(this);
     this.panelHeader = this.panelHeader.bind(this);
     this.updateQueue = this.updateQueue.bind(this);
+    this.previewTab = this.previewTab.bind(this);
   }
 
   componentDidMount() {
@@ -42,7 +43,13 @@ export default class ReportContainer extends Component {
   }
 
   onChangeUI(state) {
-    ReportActions.updateCheckedTags.defer(state);
+    const { lastUiChange } = ReportStore.getState();
+    const current = new Date().getTime();
+    const shouldUpdate = current - lastUiChange >= 5000;
+    if (shouldUpdate) {
+      ReportActions.changeUi.defer(current);
+      setTimeout(() => ReportActions.updateCheckedTags.defer(state), 5000);
+    }
   }
 
   panelHeader() {
@@ -92,6 +99,18 @@ export default class ReportContainer extends Component {
     }
   }
 
+  previewTab() {
+    const { previewLoading } = this.state;
+    return (
+      <p style={{ height: 0 }}>
+        preview
+        {
+          previewLoading ? <i className="fa fa-refresh fa-spin fa-fw" /> : null
+        }
+      </p>
+    );
+  }
+
   render() {
     const { splSettings, checkedAllSplSettings, archives, activeKey,
       rxnSettings, checkedAllRxnSettings, imgFormat, fileName, template,
@@ -143,7 +162,7 @@ export default class ReportContainer extends Component {
               <Serials selMolSerials={selMolSerials} template={template} />
             </div>
           </Tab>
-          <Tab eventKey={4} title={'Preview'}>
+          <Tab eventKey={4} title={this.previewTab()}>
             <div className="panel-fit-screen">
               <Previews
                 selectedObjs={selectedObjs}

diff --git a/app/assets/javascripts/components/stores/ReportStore.js b/app/assets/javascripts/components/stores/ReportStore.js
@@ -60,6 +60,8 @@ class ReportStore {
     this.template = 'standard';
     this.prdAtts = [];
     this.attThumbNails = [];
+    this.lastUiChange = new Date().getTime();
+    this.previewLoading = false;
     this.fileName = '';
 
     this.bindListeners({
@@ -89,6 +91,7 @@ class ReportStore {
       handleUpdMSVal: ReportActions.updMSVal,
       handleUpdateThumbNails: ReportActions.updateThumbNails,
       handleUpdateDefaultTags: ReportActions.updateDefaultTags,
+      handleChangeUi: ReportActions.changeUi,
     });
   }
 
@@ -277,6 +280,7 @@ class ReportStore {
             selectedObjs: finalObjs,
             prdAtts: newPrdAtts,
             selMolSerials: molSerials,
+            previewLoading: false,
           });
         }).catch((errorMessage) => {
           console.log(errorMessage);
@@ -300,6 +304,11 @@ class ReportStore {
         selectedObjs: finalObjs,
         prdAtts: newPrdAtts,
         selMolSerials: molSerials,
+        previewLoading: false,
+      });
+    } else {
+      this.setState({
+        previewLoading: false,
       });
     }
   }
@@ -718,6 +727,13 @@ class ReportStore {
     this.setState({ defaultTags });
     // TODO: update selectedObjs?
   }
+
+  handleChangeUi(current) {
+    this.setState({
+      lastUiChange: current,
+      previewLoading: true,
+    });
+  }
 }
 
 export default alt.createStore(ReportStore, 'ReportStore');
diff --git a/spec/javascripts/fixture/report.js b/spec/javascripts/fixture/report.js
@@ -56,6 +56,7 @@ const originalState = {
   selMolSerials: [],
   attThumbNails: [],
   prdAtts: [],
+  previewLoading: false,
 };
 
 export { originalState, splSettings, rxnSettings, configs };
diff --git a/spec/javascripts/stores/ReportStore.spec.js b/spec/javascripts/stores/ReportStore.spec.js
@@ -15,6 +15,7 @@ describe('ReportStore', () => {
     const actual = ReportStore.getState()
     const expected = originalState
     expected.fileName = actual.fileName
+    delete actual['lastUiChange']
     expect(actual).toEqual(expected)
   })
 
@@ -37,6 +38,7 @@ describe('ReportStore', () => {
   it('should handleToggleSplSettingsCheckAll', () => {
     ReportActions.toggleSplSettingsCheckAll()
     const newState = ReportStore.getState()
+    delete newState['lastUiChange']
     const expected = { ...originalState,
       checkedAllSplSettings: false,
       splSettings: [ {text: "diagram", checked: false},
@@ -50,6 +52,7 @@ describe('ReportStore', () => {
   it('should handleToggleRxnSettingsCheckAll', () => {
     ReportActions.toggleRxnSettingsCheckAll()
     const newState = ReportStore.getState()
+    delete newState['lastUiChange']
     const expected = { ...originalState,
       checkedAllRxnSettings: false,
       rxnSettings: [ {text: "diagram", checked: false},