Commit c3ff78aa authored by Jaden Diefenbaugh's avatar Jaden Diefenbaugh

fix race cond with plots & angular, rerender plots intelligently

parent 7ebc619f
......@@ -26,7 +26,7 @@
* displays a plot report item (basically a container for the plots code to insert into)
*/
angular.module('reportApp')
.directive("groupPlotItem", ['ExperimentsService', 'PlotService', function(ExperimentsService, PlotService){
.directive("groupPlotItem", ['ExperimentsService', 'PlotService', '$timeout', function(ExperimentsService, PlotService, $timeout){
return {
scope: {
group: '=',
......@@ -40,7 +40,30 @@ angular.module('reportApp')
// container for the plots applet to insert into
scope.renderDivId = `${scope.domId}-render`;
PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
// wait until the container html element is rendered.
// angular will run these functions called with $timeout
// after everything has been rendered
$timeout(function() {
PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
});
// if the group has exps added/removed, rerender the plot
scope.$watch(
// angular doesnt watch arrays properly (i.e. watching scope.group._experimentNames),
// as it doesnt register array changes.
// it also doesnt watch getters properly (i.e. watching scope.group.experiments),
// because it compares shallowly and getters commonly return a new obj each time.
// so, watch the getters length instead
() => scope.group.experiments.length,
(newExps, oldExps) => {
// if the container is rendered and it already has had a render,
// redo the render
if(el && el.childNodes.length > 0){
el.innerHTML = '';
PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
}
}
);
},
template: `
<div id="{{domId}}-heading" class="panel-heading" role="tab">
......
......@@ -26,7 +26,7 @@
* displays a plot report item
*/
angular.module('reportApp')
.directive("groupPlotItem", ['ExperimentsService', 'PlotService', function(ExperimentsService, PlotService){
.directive("groupPlotItem", ['ExperimentsService', 'PlotService', '$timeout', function(ExperimentsService, PlotService, $timeout){
return {
scope: {
group: '=',
......@@ -38,7 +38,9 @@ angular.module('reportApp')
scope.domId = `${scope.group.name}_${scope.id}`;
scope.renderDivId = `${scope.domId}-render`;
PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
$timeout(function() {
PlotService.addPlot(scope.group, scope.id, scope.renderDivId);
});
},
template: `
<div class='panel-body'>
......
......@@ -52,6 +52,10 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// defaults obj, in case we're using defaults
const defaults = defaultPlotters.find(p => p.dataformat === content.type);
if (!defaults) {
console.log(`No default plotter found for content type ${JSON.stringify(content.type)} out of:`);
console.log(defaultPlotters);
}
// a plot obj can have different plotters,
let plotter = content.savedPlotter || plotters.find(p => p.name === defaults.plotter);
......@@ -59,8 +63,6 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// which can each have different configurations (plotter parameter instances)
let config = content.savedConfig || plotterParameters.find(pp => pp.name === defaults.parameter);
console.log(config);
// sanity check for the plotter & config
// the config's "plotter" field should be equal to the plotter's id field
if(!(config.plotter === plotter.id)){
......@@ -112,8 +114,6 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
console.log(possibleParameters);
const returnStruct = [requestData, possiblePlotters, possibleParameters];
console.log(`return struct`);
console.log(returnStruct);
return returnStruct;
};
......@@ -123,7 +123,6 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// the 'url_prefix' field found throughout the BEAT code is confusing,
// but it seems to always be an empty string now
const urlPrefix = '';//UrlService.getApiSegment().split('/').filter(s => s.length > 0).join('/');
console.log(urlPrefix);
// promisify this utils func so we dont have to deal with callback hell
return new Promise((resolve, reject) => {
......@@ -139,7 +138,6 @@ angular.module('reportApp').factory('PlotService', ['UrlService', function(UrlSe
// callback
(...args) => {
// resolve promise
console.log(args);
resolve(...args);
}
);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment