Merge pull request #39 from 4dn-dcic/metaworkflowrun-example

Metaworkflowrun Example

Author: Bianca-Morris

CHANGELOG.md

@@ -0,0 +1,38 @@
+## Changelog
+
+- [View releases on Github](https://github.com/4dn-dcic/react-workflow-viz/releases)
+- [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-16 (v0.1.8)
+- Add new metaworkflow run example to demo page
+
+#### 2022-04-22 (v0.1.6, v0.1.7)
+- Stop tracking `dist` and `es` directories/hide in `.gitignore`
+- Package version updates for `webpack`, `babel` deps, `d3`, and `underscore`
+- Slight improvement to `parsing-functions.js`
+- Updates to `package-lock`
+
+#### 2022-02-22 (v0.1.5)
+- Update `react` and `react-dom` dependencies from `^16.14.0` to `>=16.14.0`
+
+#### 2021-09-13 (v0.1.3, v0.1.4)
+- Added couple of new demo files for development.
+
+#### 2020-03-13 (v0.1.3, v0.1.4)
+- Improvements in path plotting - do not diverge into separate paths unless necessary.
+- Demo updates.
+- Minor patch: move http-server to devDependencies.
+
+#### 2020-01-21 (v0.1.2)
+- Important glitch fixes, including typo and intersection counting.
+- PROTOTYPE / NOT ENABLED: Reuse horizontal edge segments (to reduce # of lines; noise) if:
+  - Segment is on same Y coordinate as previous segment (or source node, if first segment) _and_ has common source node. This prevents a path from a single node from prematuraly splitting into many separate paths.
+  - Segment is leading to a common target node. This allows paths to converge if beneficial.
+  - This could be better tested; perhaps reused segments should be treated differently in regard to intersections (at least excluded).
+
+#### 2019-10-06 (v0.1.1)
+- Improved ordering of terminal reference file input nodes.
+  - Now compares distance of closest step that is being input into; those which go into further steps get pushed to bottom.
+- For edges spanning more than one column gap, longer edges now get drawn/'traced' before shorter edges (experimental-ish).
+- Including comments in ESM build output.

README.md

@@ -4,10 +4,13 @@ React component for visualizing CWL-like workflows (and similar data).
 This is in alpha/beta phase.
 
 
-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 the CGAP (final name TDB) project for similar purposes.
+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)
 
-Checkout the current demo at [unpkg.com/@hms-dbmi-bgm/react-workflow-viz/index.html](https://unpkg.com/@hms-dbmi-bgm/react-workflow-viz/index.html), which points to the index.html file in the distributable NPM package (and in this repo).
 
 ## Build demo
 
@@ -20,35 +23,14 @@ 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
 
+
 ### For Development
 
 For local development (watches file, serves on localhost:8100), run `npm run dev`.
 
 
 ## Changelog
-_Side Note -_ Is there a way to auto-generate a `CHANGELOG.md` file out of releases' content?
-
-#### 2021-09-13 (v0.1.3, v0.1.4)
-- Added couple of new demo files for development.
-
-#### 2020-03-13 (v0.1.3, v0.1.4)
-- Improvements in path plotting - do not diverge into separate paths unless necessary.
-- Demo updates.
-- Minor patch: move http-server to devDependencies.
-
-#### 2020-01-21 (v0.1.2)
-- Important glitch fixes, including typo and intersection counting.
-- PROTOTYPE / NOT ENABLED: Reuse horizontal edge segments (to reduce # of lines; noise) if:
-  - Segment is on same Y coordinate as previous segment (or source node, if first segment) _and_ has common source node. This prevents a path from a single node from prematuraly splitting into many separate paths.
-  - Segment is leading to a common target node. This allows paths to converge if beneficial.
-  - This could be better tested; perhaps reused segments should be treated differently in regard to intersections (at least excluded).
-
-#### 2019-10-06 (v0.1.1)
-
-- Improved ordering of terminal reference file input nodes.
-  - Now compares distance of closest step that is being input into; those which go into further steps get pushed to bottom.
-- For edges spanning more than one column gap, longer edges now get drawn/'traced' before shorter edges (experimental-ish).
-- Including comments in ESM build output.
+Changelog has been moved to `CHANGELOG.md` file in root directory. Please check there for updates.
 
 
 ## Things to do

demo/demo.js

@@ -73,6 +73,12 @@ class DemoApp extends Component {
                 "description" : null,
                 "href" : url.resolve(BASE_HREF, "for-development-hi-c-workflowrunawsem.json"),
                 "opts" : workflowOpts
+            },
+            {
+                "name" : "MetaWorkflowRun - WGS SNV Germline Trio Example",
+                "description": null,
+                "href" : url.resolve(BASE_HREF, "meta-workflow-run-WGS-SNV-Germline-Trio.json"),
+                "opts" : workflowOpts
             }
         ]
     };
@@ -92,7 +98,8 @@ class DemoApp extends Component {
                 parseBasicIO: false
             },
             loadedSteps: {},
-            rowSpacingType: "compact"
+            rowSpacingType: "compact",
+            loadingSteps: false,
         };
     }
 
@@ -138,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 });
                 });
             });
         }
@@ -223,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}