Merge pull request #4902 from archesproject/4821_workflows_url_params

Fixes latency when loading a workflow. re #4821
archesproject · Jun 11, 2019 · 607b19f · 607b19f
2 parents 512ea4f + 7ddb705
commit 607b19f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 34 deletions.
diff --git a/arches/app/media/js/viewmodels/workflow-step.js b/arches/app/media/js/viewmodels/workflow-step.js
@@ -20,7 +20,13 @@ define([
             return {};
         };
 
-        _.extend(this, koMapping.fromJS(config));
+        Object.keys(config).forEach(function(prop){
+            if(prop !== 'workflow') {
+                config[prop] = koMapping.fromJS(config[prop]);
+            }
+        });
+
+        _.extend(this, config);
 
         this.iconClass = ko.computed(function(){
             var ret = '';
@@ -33,14 +39,6 @@ define([
             }
             return ret + ' ' + ko.unwrap(this.icon);
         }, this);
-
-        this.ready = ko.observable(false);
-        var self = this;
-
-        require([config.component], function(componentViewmodel) {
-            self.componentViewmodel = componentViewmodel;
-            self.ready(true);
-        });
     };
     return WorkflowStep;
 });
diff --git a/arches/app/media/js/viewmodels/workflow.js b/arches/app/media/js/viewmodels/workflow.js
@@ -1,9 +1,10 @@
 define([
     'jquery',
+    'underscore',
     'knockout',
     'knockout-mapping',
     'viewmodels/workflow-step'
-], function($, ko, koMapping, Step) {
+], function($, _, ko, koMapping, Step) {
     var Workflow = function(config) {
         var self = this;
         this.steps = config.steps || [];
@@ -13,7 +14,6 @@ define([
         this.loading = config.loading || ko.observable(false);
         this.alert = config.alert || ko.observable(null);
         this.state = {steps:{}};
-        this.advance = true;
 
         this.restoreStateFromURL = function(){
             var urlparams = new window.URLSearchParams(window.location.search);
@@ -26,29 +26,28 @@ define([
         this.restoreStateFromURL();
 
         this.ready.subscribe(function() {
-            self.steps.forEach(function(step, i) {
-                if (!(self.steps[i] instanceof Step)) {
-                    step.workflow = self;
-                    step.loading = self.loading;
-                    step.alert = self.alert;
-                    self.steps[i] = new Step(step);
-                    self.steps[i].ready.subscribe(function(val){
-                        if (val) {
-                            console.log(self.steps[i])
-                        }
-                    })
-                    self.steps[i].complete.subscribe(function(complete) {
-                        if (complete && self.advance) self.next();
-                    });
+            var components = _.unique(self.steps.map(function(step) {return step.component;}));
+            require(components, function() {
+                // var modules = arguments;
+                self.steps.forEach(function(step, i) {
+                    if (!(self.steps[i] instanceof Step)) {
+                        step.workflow = self;
+                        step.loading = self.loading;
+                        step.alert = self.alert;
+                        self.steps[i] = new Step(step);
+                        self.steps[i].complete.subscribe(function(complete) {
+                            if (complete) self.next();
+                        });
+                    }
+                    self.steps[i]._index = i;
+                });
+                if (self.state.activestep) {
+                    self.activeStep(self.steps[self.state.activestep]);
+                }
+                else if(self.steps.length > 0) {
+                    self.activeStep(self.steps[0]);
                 }
-                self.steps[i]._index = i;
             });
-            if (self.state.activestep) {
-                self.activeStep(self.steps[self.state.activestep]);
-            }
-            else if(self.steps.length > 0) {
-                self.activeStep(self.steps[0]);
-            }
         });
 
         this.updateUrl = function() {

diff --git a/arches/app/templates/views/components/plugins/workflow.htm b/arches/app/templates/views/components/plugins/workflow.htm
@@ -1,6 +1,7 @@
 {% load i18n %}
 <!--ko if: ready() -->
 <div class="workflow-plugin">
+    <!--ko if: ko.unwrap(activeStep) -->
     <div class="workflowstep-nav">
         <!--ko foreach: {data: steps, as: 'step'}-->
         <div data-bind=""><i class="fa fa-lg" data-bind="class: step.iconClass"></i></div>
@@ -17,14 +18,13 @@
         <div class="workflow-nav-controls right"><i class="fa fa-chevron-circle-right" data-bind="click: next"></i></div>
     </div>
     <div class='workflow-step-body'>
-        <!--ko if: activeStep().ready() -->
         <!--ko if: activeStep().componentname-->
             <!-- ko component: {
                 name: activeStep().componentname,
                 params: activeStep()
             } --><!--/ko-->
             <!--/ko-->
-        <!--/ko-->
     </div>
+    <!--/ko-->
 </div>
 <!--/ko-->