Load demo steps via AJAX, emit source map.

Author: alexkb0009

demo/demo.js

@@ -6,16 +6,8 @@ import url from 'url';
 // Loaded on index.html, defined as an external in webpack.config.demo.js
 import Graph, { GraphParser } from 'react-workflow-viz';
 
-// TODO: Load via AJAX or something, replace 'steps' with a 'href', ..
-
-import { STEPS as testWorkflowBedToBedDB } from './testdata/workflow-bedtobeddb';
-import { STEPS as testWorkflowAtacSeq } from './testdata/workflow-atac-seq';
-import { STEPS as testFileProcessed4DNFI9WF1Y8W } from './testdata/provenance-file-processed-4DNFI9WF1Y8W';
-import { STEPS as testFileProcessedGAPFIWCFWBCO } from './testdata/provenance-file-processed-GAPFIWCFWBCO';
-import { STEPS as testExpset4DNESUJC9Y83 } from './testdata/provenance-expset-4DNESUJC9Y83';
-import { STEPS as testExpset4DNES54YB6TQ } from './testdata/provenance-expset-4DNES54YB6TQ';
-
-
+// eslint-disable-next-line no-undef
+const BASE_HREF = (typeof BUILDTYPE === "string" && BUILDTYPE === "development") ? "http://localhost:8100/demo/testdata/" : "https://unpkg.com/@hms-dbmi-bgm/react-workflow-viz/demo/testdata/"
 
 const workflowOpts = {
     //"showReferenceFiles": true,
@@ -29,39 +21,44 @@ class DemoApp extends Component {
             {
                 "name" : "File Processed - 4DNFI9WF1Y8W",
                 "description" : null,
-                "steps" : testFileProcessed4DNFI9WF1Y8W,
-                // todo:
-                //"href" : "https://unpkg.com/@hms-dbmi-bgm/react-workflow-viz/demo/testdata/provenance-file-processed-4DNFI9WF1Y8W.json",
+                "href" : url.resolve(BASE_HREF, "provenance-file-processed-4DNFI9WF1Y8W.json"),
                 "opts" : {}
             },
             {
                 "name" : "File Processed - GAPFIWCFWBCO",
                 "description" : null,
-                "steps" : testFileProcessedGAPFIWCFWBCO,
+                "href" : url.resolve(BASE_HREF, "provenance-file-processed-GAPFIWCFWBCO.json"),
+                "opts" : {}
+            },
+            {
+                "name" : "File Processed - GAPFIRPF7X1K",
+                "description" : null,
+                "href" : url.resolve(BASE_HREF, "provenance-file-processed-GAPFIRPF7X1K.json"),
                 "opts" : {}
             },
             {
                 "name" : "Experiment Set - 4DNES54YB6TQ",
                 "description" : null,
-                "steps" : testExpset4DNES54YB6TQ,
+                "href" : url.resolve(BASE_HREF, "provenance-expset-4DNES54YB6TQ.json"),
                 "opts" : {}
             },
+            
             {
                 "name" : "Experiment Set - 4DNESUJC9Y83",
                 "description" : null,
-                "steps" : testExpset4DNESUJC9Y83,
+                "href" : url.resolve(BASE_HREF, "provenance-expset-4DNESUJC9Y83.json"),
                 "opts" : {}
             },
             {
                 "name" : "CWL Workflow - ATAC-SEQ",
                 "description" : null,
-                "steps" : testWorkflowAtacSeq,
+                "href" : url.resolve(BASE_HREF, "workflow-atac-seq.json"),
                 "opts" : workflowOpts
             },
             {
                 "name" : "CWL Workflow - BED to BEDDB",
                 "description" : null,
-                "steps" : testWorkflowBedToBedDB,
+                "href" : url.resolve(BASE_HREF, "workflow-bedtobeddb.json"),
                 "opts" : workflowOpts
             }
         ]
@@ -74,17 +71,22 @@ class DemoApp extends Component {
         this.handleDemoChange = this.handleDemoChange.bind(this);
         this.loadDemoData = this.loadDemoData.bind(this);
         this.state = {
-            currentDemoIdx: 1,
+            currentDemoIdx: 0,
             parsingOptions: {
                 showReferenceFiles: true,
                 showParameters: false,
                 showIndirectFiles: false,
                 parseBasicIO: false
             },
+            loadedSteps: {},
             rowSpacingType: "compact"
         };
     }
 
+    componentDidMount(){
+        this.loadDemoData();
+    }
+
     handleParsingOptChange(evt){
         const key = evt.target.getAttribute("name");
         if (!key) return false;
@@ -116,30 +118,40 @@ class DemoApp extends Component {
 
     loadDemoData(){
         const { testData } = this.props;
-        const { currentDemoIdx } = this.state;
+        const { currentDemoIdx, loadedSteps } = this.state;
         const currDemoInfo = testData[currentDemoIdx];
         const { name, href } = currDemoInfo;
-        const existingSteps = currDemoInfo.steps || this.state['loadedStepsFor: ' + name];
+
+        const existingSteps = currDemoInfo.steps || loadedSteps[name];
+
         if (!Array.isArray(existingSteps)) {
-            this.setState({ loadingSteps: true },()=>{
+            this.setState({ loadingSteps: true }, ()=>{
                 window.fetch(url.resolve(window.location.href, href)).then((resp)=>{
-                    return JSON.parse(resp);
+                    return resp.json();
                 }).then((resp)=>{
-                    this.setState({ ['loadedStepsFor: ' + name] : resp, loadingSteps: false });
+                    this.setState(function({ loadedSteps: prevSteps }){
+                        return {
+                            loadedSteps: { ...prevSteps, [name] : resp },
+                            loadingSteps: false
+                        };
+                    });
                 });
             });
         }
+
     }
 
     render(){
         const { testData } = this.props;
-        const { currentDemoIdx, parsingOptions, rowSpacingType } = this.state;
-        const { name, description, steps, opts: overrideOpts } = testData[currentDemoIdx];
+        const { currentDemoIdx, parsingOptions, rowSpacingType, loadedSteps, loadingSteps } = this.state;
+        const { name, description, steps: preloadedSteps, opts: overrideOpts } = testData[currentDemoIdx];
         const fullParseOpts = { ...parsingOptions, ...overrideOpts };
 
+        const steps = preloadedSteps || loadedSteps[name];
+
         return (
             <div className="demo-app-container">
-                <TestDataSelect {...{ currentDemoIdx, testData }} onChange={this.handleDemoChange} />
+                <TestDataSelect {...{ currentDemoIdx, testData, loadingSteps }} onChange={this.handleDemoChange} />
                 <ParsingOptsCheckboxes {...parsingOptions} dataOpts={overrideOpts}
                     onChange={this.handleParsingOptChange} onChangeBasicIO={this.handleChangeBasicIO} />
                 <RowSpacingTypeSelect rowSpacingType={rowSpacingType} onChange={this.handleRowSpacingTypeChange} />
@@ -154,16 +166,16 @@ class DemoApp extends Component {
 
 
 function TestDataSelect(props){
-    const { currentDemoIdx, testData, onChange } = props;
+    const { currentDemoIdx, testData, onChange, loadingSteps = false } = props;
     const { name: currDemoName } = testData[currentDemoIdx];
     const optionItems = testData.map(function({ name, steps, description }, idx){
         return <option name={idx} key={idx}>{ name }</option>;
     });
     return (
         <div className="row-spacing-type-container options-container">
             <label>
-                <h5>Test Data</h5>
-                <select onChange={onChange} value={currDemoName}>
+                <h5>Test Data { loadingSteps ? <small>(loading...)</small> : null }</h5>
+                <select onChange={onChange} value={currDemoName} disabled={loadingSteps}>
                 { optionItems }
                 </select>
             </label>

demo/testdata/provenance-expset-4DNES54YB6TQ.js renamed to demo/testdata/provenance-expset-4DNES54YB6TQ.json

@@ -1,4 +1,4 @@
-export const STEPS = [
+[
     {
         "outputs":[
             {
@@ -3835,4 +3835,4 @@ export const STEPS = [
             "@id":"/workflow-runs-awsem/5d0e1af2-be6a-41b8-96ad-84eb6a6ab4ba/"
         }
     }
-];
+]

demo/testdata/provenance-expset-4DNESUJC9Y83.js renamed to demo/testdata/provenance-expset-4DNESUJC9Y83.json

@@ -1,4 +1,4 @@
-export const STEPS = [
+[
     {
         "outputs":[
             {
@@ -2393,4 +2393,4 @@ export const STEPS = [
             "@id":"/workflow-runs-awsem/b7c603e6-8b82-4d8e-ac50-6c0860e94707/"
         }
     }
-];
+]

demo/testdata/provenance-file-processed-4DNFI9WF1Y8W.js renamed to demo/testdata/provenance-file-processed-4DNFI9WF1Y8W.json

@@ -1,4 +1,4 @@
-export const STEPS = [
+[
     {
         "name":"/workflow-runs-awsem/d353e726-2a47-4e93-b1f4-cfa7037ee3bc/",
         "inputs":[
@@ -2804,4 +2804,4 @@ export const STEPS = [
             }
         }
     }
-];
+]