Skip to content

Commit

Permalink
Load JS Library SnapJS when used.
Browse files Browse the repository at this point in the history
SnapJS is used in Spectrum Display for drawing arc for Looplinks.
Delay loading SnapJS until Spectrum Display is opened to greatly reduce
the number of page loads that SnapJS is loaded on.
  • Loading branch information
danjasuw committed Jun 24, 2019
1 parent 6c269c7 commit 43a9d3a
Show file tree
Hide file tree
Showing 13 changed files with 317 additions and 137 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
/**
* snapSVG_Library_Loader.js
*
* Javascript for Loading the Snap SVG API Library (JS file included in this webapp)
*
* Uses jQuery $.ajax to load Javascript
*
*/

//JavaScript directive: all variables have to be declared with "var", maybe other things
"use strict";

///////////////////////////////////////////

/**
* module imports
*/

import { reportWebErrorToServer } from 'page_js/header_section_js_all_pages_main_pages/header_section_every_page/reportWebErrorToServer.js';


/**
* Local Constants
*/

const LOADER_URL ="js/libs/snap.svg-min.js";

const LOADER_LOADED_NO = "LOADED_NO";
const LOADER_LOADING_IN_PROGRESS = "LOADING_IN_PROGRESS";
const LOADER_LOADED_YES = "LOADED_YES";

/**
* Local Variables
*/

/**
* Local Variables - Chart Loader Loading
*/
let libraryLoader_Loaded = LOADER_LOADED_NO;
let libraryLoader_DeferredToResolveOnLoad = [];

/**
* Local Variables - Core Charts Loading
*/

let library_Loaded = LOADER_LOADED_NO;
let library_DeferredToResolveOnLoad = [];

/**
* Local Class - Kind of a Hack but it works
*/
class Deferred_Local_LibraryLoader {
constructor() {
this.promise = new Promise((resolve, reject)=> {
try {
this.reject = reject;
this.resolve = resolve;
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});
}

containedPromise() {
return this.promise;
}
resolvePromise() {
this.resolve();
}
rejectPromise() {
this.reject();
}
};



/**
* Local Functions
*/

/**
*
*/
let _loadSnapSVGLoader = function() {

if ( libraryLoader_Loaded === LOADER_LOADED_YES ) {
return Promise.resolve();
}

if ( libraryLoader_Loaded === LOADER_LOADING_IN_PROGRESS ) {

let deferred = new Deferred_Local_LibraryLoader();
libraryLoader_DeferredToResolveOnLoad.push( deferred );
// console.log("Adding to snapSVG_LibraryLoader_DeferredToResolveOnLoad");
return { loadingPromise: deferred.containedPromise() };
}

libraryLoader_Loaded = LOADER_LOADING_IN_PROGRESS;

return new Promise( function( resolve, reject ) {
try {
jQuery.ajax({
url: LOADER_URL,
dataType: "script",
cache: true
}).done( function( data, textStatus, jqXHR ) {
try {
libraryLoader_Loaded = LOADER_LOADED_YES;

let snapSVG_LibraryLoader_DeferredToResolveOnLoad_Local = libraryLoader_DeferredToResolveOnLoad;

libraryLoader_DeferredToResolveOnLoad = []; // reset

if ( snapSVG_LibraryLoader_DeferredToResolveOnLoad_Local.length > 0 ) {
for ( const snapSVG_LibraryLoader_DeferredToResolveOnLoadItem of snapSVG_LibraryLoader_DeferredToResolveOnLoad_Local ) {
// console.log("Processsing entry in snapSVG_LibraryLoader_DeferredToResolveOnLoad_Local, index: " + i );
snapSVG_LibraryLoader_DeferredToResolveOnLoadItem.resolvePromise();
}
}

resolve();

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
}).fail( function( jqXHR, textStatus, errorThrown ) {
handleRawAJAXError( jqXHR, textStatus, errorThrown );
});
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
} );
};


/**
* Public functions
*/

/**
*
*/
let loadSnapSVG_Library = function() {

if ( library_Loaded === LOADER_LOADED_YES ) {
return { isLoaded: true };
}

if ( library_Loaded === LOADER_LOADING_IN_PROGRESS ) {

let deferred = new Deferred_Local_LibraryLoader();
library_DeferredToResolveOnLoad.push( deferred );
// console.log("Adding to snapSVG_LibraryCoreCharts_DeferredToResolveOnLoad");
return { loadingPromise: deferred.containedPromise() };
}

library_Loaded = LOADER_LOADING_IN_PROGRESS;

return { loadingPromise : new Promise( function( resolve, reject ) {
try {
let loadSnapSVG_Loader_Promise = _loadSnapSVGLoader()
loadSnapSVG_Loader_Promise.then(function(value) { // On Fulfilled
try {
library_Loaded = LOADER_LOADED_YES;

let snapSVG_LibraryCoreCharts_DeferredToResolveOnLoad_Local = library_DeferredToResolveOnLoad;

library_DeferredToResolveOnLoad = []; // reset

if ( snapSVG_LibraryCoreCharts_DeferredToResolveOnLoad_Local.length > 0 ) {
snapSVG_LibraryCoreCharts_DeferredToResolveOnLoad_Local.forEach(function( snapSVG_LibraryCoreCharts_DeferredToResolveOnLoadItem, i, array) {
// console.log("Processsing entry in snapSVG_LibraryCoreCharts_DeferredToResolveOnLoad_Local, index: " + i );
snapSVG_LibraryCoreCharts_DeferredToResolveOnLoadItem.resolvePromise();
}, this)
}

resolve();
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
}).catch(function(reason) {
try {
throw Error( "ERROR: Loading Snap SVG JS Library from Local webapp" );
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
} ) };

};


export { loadSnapSVG_Library }
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@

// module import

import { loadSnapSVG_Library } from 'page_js/data_pages/data_pages_common/snapSVG_Library_Loader.js';

import { addFlotToJquery } from 'libs/Lorikeet/jquery.flot.js';
import { addFlotSelectionToJquery } from 'libs/Lorikeet/jquery.flot.selection.js';

Expand Down Expand Up @@ -107,65 +109,115 @@ function addOpenLorikeetViewerClickHandlers( $openLorkeetLinks ) {

////////////////////////////////////////////////////

// On Click Handler

var openViewLorikeetOverlay = function( event, ui ) {
try {
const eventTarget = event.target;

var $this = $( this );
var $eventTarget = $( eventTarget ); // 'eventTarget' is DOM element

// Code to mark the last clicked psm with a different color. The CSS class does not exist yet
$(".psm-open-spectrum-link-clicked").removeClass("psm-open-spectrum-link-clicked");
$this.addClass("psm-open-spectrum-link-clicked");
// Code to mark the last clicked psm with a different color. The CSS class does not exist yet
$(".psm-open-spectrum-link-clicked").removeClass("psm-open-spectrum-link-clicked");
$eventTarget.addClass("psm-open-spectrum-link-clicked");




var psmId = $this.attr("psmId");
var psmId = $eventTarget.attr("psmId");

const promises = [];

const promise_getLorikeetDatFromServer = getLorikeetDatFromServer({ psmId });
promises.push( promise_getLorikeetDatFromServer );

const loadSnapSVG_Library_Response = loadSnapSVG_Library();
const promise_loadSnapSVG_Library = loadSnapSVG_Library_Response.loadingPromise;
if ( promise_loadSnapSVG_Library ) {
promises.push( promise_loadSnapSVG_Library );
}

// var ajaxRequestData = { scanId: scanId, peptideId: peptideId, psmId: psmId };

var ajaxRequestData = { psmId: psmId };

$.ajax(
{ url : LORIKEET_PAGE_PROCESSING_CONSTANTS.serviceURL_lorikeetSpectrum_getData,

success : function( data ) {
const promisesAll = Promise.all( promises );

try {
// testStatusOnReturnedJSON( data );
promisesAll.catch( ( ) => { } );

openViewLorikeetOverlayProcessData( data );

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
promisesAll.then( ( promiseResolveResultsArray ) => {
try {
let processDataParam = {};
for ( const promiseResolveResultsEntry of promiseResolveResultsArray ) {
if ( promiseResolveResultsEntry && promiseResolveResultsEntry.lorikeetData ) {
processDataParam.lorikeetData = promiseResolveResultsEntry.lorikeetData;
}
},
failure: function(errMsg) {
handleAJAXFailure( errMsg );
},
}

error: function(jqXHR, textStatus, errorThrown) {
openViewLorikeetOverlayProcessData( processDataParam );

// alert("Error response from server getting Lorikeet data");

handleAJAXError( jqXHR, textStatus, errorThrown );
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});

event.preventDefault(); // prevent default for element

event.stopPropagation(); // prevent click bubbling

},
data: ajaxRequestData, // The data sent as params on the URL
dataType : "json"
});
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
}

event.preventDefault(); // prevent default for element
const getLorikeetDatFromServer = function({ psmId }) {

event.stopPropagation(); // prevent click bubbling
// var ajaxRequestData = { scanId: scanId, peptideId: peptideId, psmId: psmId };

return new Promise( (resolve, reject) => {
try {

var ajaxRequestData = { psmId };

$.ajax(
{ url : LORIKEET_PAGE_PROCESSING_CONSTANTS.serviceURL_lorikeetSpectrum_getData,

success : function( data ) {
try {
resolve({ lorikeetData : data })

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
},
failure: function(errMsg) {
handleAJAXFailure( errMsg );
reject();
},

error: function(jqXHR, textStatus, errorThrown) {

// alert("Error response from server getting Lorikeet data");

handleAJAXError( jqXHR, textStatus, errorThrown );
reject();
},
data: ajaxRequestData, // The data sent as params on the URL
dataType : "json"
});

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});
};


///////////////////////////////

var openViewLorikeetOverlayProcessData = function( data ) {
var openViewLorikeetOverlayProcessData = function( processDataParam ) {

const lorikeetData = processDataParam.lorikeetData;

var lorikeetOptions = data.data;
var lorikeetOptions = lorikeetData.data;

// Set Lorikeet options

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ import { searchesChangeDisplayOrder } from 'page_js/data_pages/project_search_id
import { searchesForPageChooser } from 'page_js/data_pages/project_search_ids_driven_pages/common/searchesForPageChooser.js';
import { sharePageURLShortener } from 'page_js/data_pages/project_search_ids_driven_pages/common/sharePageURLShortener.js';

import { loadSnapSVG_CoreChart } from 'page_js/data_pages/data_pages_common/snapSVG_Library_Loader.js';


import { defaultPageView } from 'page_js/data_pages/project_search_ids_driven_pages/common/defaultPageView.js';

Expand Down Expand Up @@ -6403,7 +6405,15 @@ window.imageViewerPageObject = {

$(document).ready(function() {
try {
imagePagePrimaryRootCodeObject.call__initPage();
const loadSnapSVG_CoreChart_Response = loadSnapSVG_CoreChart();
const promise_loadSnapSVG_CoreChart = loadSnapSVG_CoreChart_Response.loadingPromise;
if ( promise_loadSnapSVG_CoreChart ) {
promise_loadSnapSVG_CoreChart.then( ( ) => {
imagePagePrimaryRootCodeObject.call__initPage();
});
} else {
imagePagePrimaryRootCodeObject.call__initPage();
}
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
Expand Down

0 comments on commit 43a9d3a

Please sign in to comment.