Merge branch 'master' of https://github.com/4dn-dcic/react-workflow-viz into May2023-deps

Author: Bianca-Morris

CHANGELOG.md

@@ -4,6 +4,9 @@
 - [View releases on NPM](https://www.npmjs.com/package/@hms-dbmi-bgm/react-workflow-viz?activeTab=versions)
 - [View releases on Unpkg](https://unpkg.com/browse/@hms-dbmi-bgm/react-workflow-viz/)
 
+#### 2023-05-17 (v0.1.9)
+- No changes except `package-lock.json` + `package.json` version (new NPM release)
+
 #### 2023-05-16 (v0.1.8)
 - Add new metaworkflow run example to demo page
 

README.md

@@ -1,35 +1,43 @@
 # react-workflow-viz
 React component for visualizing CWL-like workflows (and similar data).
 
-This is in alpha/beta phase.
+This repository is in alpha/beta phase, and is provided with very, very limited support to folks outside of HMS. Hopefully, in the future this will change!
 
-
-This package is being used by HMS-DBMI in the [4DN Data Portal](https://data.4dnucleome.org/experiment-set-replicates/4DNESMU2MA2G/#graph-section) to show provenance of analytical pipeline runs.
+Currently, this package is being used by HMS-DBMI in the [4DN Data Portal](https://data.4dnucleome.org/experiment-set-replicates/4DNESMU2MA2G/#graph-section) to show provenance of analytical pipeline runs.
 Also being used in [CGAP](https://cgap.hms.harvard.edu) for similar purposes.
 
 Check out a live demo at [unpkg.com/@hms-dbmi-bgm/react-workflow-viz/index.html](https://unpkg.com/@hms-dbmi-bgm/react-workflow-viz/index.html). _Note: This link points to the index.html file in the distributable NPM package (and in this repo)._
 
+[![Gif of CWL Workflow Viz](https://i.gyazo.com/0c5e73105b1f284c16a9cca03ec866ed.gif)](https://unpkg.com/@hms-dbmi-bgm/react-workflow-viz/index.html)
+
+<br/>
+<br/>
 
-## Build demo
+## Try Demo Locally
 
-With a checkout of the repo:
+With a local clone and checkout of the repo:
 ```
 npm install
 npm run build
 ```
 
 When it completes, load `file:///path-to-your-checkout/react-workflow-viz/index.html`.
-New testdata won't show with `npm run build` unless is already present in unpkg/npm. For local development, do the following
 
+_Note: New test data won't show with `npm run build` unless it is already present in unpkg/npm._
 
-### For Development
+<br/>
 
-For local development (watches file, serves on localhost:8100), run `npm run dev`.
+### For Contributors/Collaborators
+For local development, run `npm run dev` (watches `/src/` files, serves on `localhost:8100`).
 
+<br/>
+<br/>
 
 ## Changelog
-Changelog has been moved to `CHANGELOG.md` file in root directory. Please check there for updates.
+Changelog has been moved to `CHANGELOG.md` file in [repo's root directory](https://github.com/4dn-dcic/react-workflow-viz/blob/master/CHANGELOG.md). Please check there for updates.
 
+<br/>
+<br/>
 
 ## Things to do
 

demo/demo.js

@@ -98,7 +98,8 @@ class DemoApp extends Component {
                 parseBasicIO: false
             },
             loadedSteps: {},
-            rowSpacingType: "compact"
+            rowSpacingType: "compact",
+            loadingSteps: false,
         };
     }
 
@@ -144,16 +145,20 @@ class DemoApp extends Component {
         const existingSteps = currDemoInfo.steps || loadedSteps[name];
 
         if (!Array.isArray(existingSteps)) {
-            this.setState({ loadingSteps: true }, ()=>{
-                window.fetch(url.resolve(window.location.href, href)).then((resp)=>{
-                    return resp.json();
-                }).then((resp)=>{
+            this.setState({ loadingSteps: true }, () => {
+                window.fetch(url.resolve(window.location.href, href))
+                .then((resp) => resp.json())
+                .then((resp) => {
                     this.setState(function({ loadedSteps: prevSteps }){
                         return {
                             loadedSteps: { ...prevSteps, [name] : resp },
                             loadingSteps: false
                         };
                     });
+                })
+                .catch((err) => {
+                    console.error("Something went wrong while loading data!", err);
+                    this.setState({ loadingSteps: false });
                 });
             });
         }
@@ -229,6 +234,9 @@ function ParsingOptsCheckboxes(props){
     return (
         <div className="parsing-options-container options-container">
             <h5>Parsing Options</h5>
+            <p className="tip-text">
+                Note: updating the viz for some parsing options (such as showing parameters) may take a few seconds to complete for larger test datasets.
+            </p>
             <label>
                 <input type="checkbox" name="showReferenceFiles"
                     checked={dataOpts['showReferenceFiles'] || showReferenceFiles}

index.html

@@ -21,6 +21,15 @@
                 margin-bottom: 10px;
             }
 
+            code {
+                background-color: #333;
+                color: #fff;
+                padding-left: 5px;
+                padding-right: 5px;
+                margin-left: 3px;
+                margin-right: 3px;
+            }
+
             #pagetitle {
                 padding-top: 10px;
                 padding-bottom: 10px;
@@ -31,6 +40,11 @@
 
             }
 
+            .intro {
+                max-width: 700px;
+                margin-bottom: 5px;
+            }
+
             .options-container {
                 margin-bottom: 10px;
             }
@@ -40,6 +54,12 @@
                 padding: 5px 10px;
             }
 
+            .parsing-options-container p {
+                font-size: smaller;
+                font-style: italic;
+                max-width: 700px;
+            }
+
             .parsing-options-container > label > input[type="checkbox"] {
                 margin-right: 5px;
                 vertical-align: text-bottom;
@@ -59,8 +79,17 @@
         <h1 id="pagetitle">
             React Workflow Viz Demo
         </h1>
-        <p>
-            One day there will be a description here...
+        <p class="intro">
+            Thanks for trying out <code>react-workflow-viz</code>!
+        </p>
+        <p class="intro"> Here you can play with a some examples of the types of visualizations this package can create. To get started, select the type of data you're most interested in visualizing from the dropdown below:
+            <!-- <ul>
+                <li><strong>File Processed:</strong> @TODO - add a short description of workflow viz + info on what C4 portal this data type is available on</li>
+                <li><strong>Experiment Set:</strong> @TODO - add a short description of workflow viz + info on what C4 portal this data type is available on</li>
+                <li><strong>CWL Workflow:</strong> @TODO - add a short description of workflow viz + info on what C4 portal this data type is available on</li>
+                <li><strong>WorkflowRunAWSEM:</strong> @TODO - add a short description of workflow viz + info on what C4 portal this data type is available on</li>
+                <li><strong>MetaWorkflowRun:</strong> @TODO - add a short description of workflow viz + info on what C4 portal this data type is available on</li>
+            </ul> -->
         </p>
         <hr/>
         <div id="root">