Javascript

JavaScript App

media/js/ Contains Javascript files.

File	Description
*.min.js	Vendor libraries (Bootstrap, jQuery, Head.load).
suit/	Vendor of django-suit scripts. Only *.min.js are used.

public/ Public Javascript files.

File	Description
api.js	Dictionary of API error code look-up and message display.
ga.js	Local copy of Google Analytics script.
load.js	Loads vendor libraries using CDN, or fallback to local files. Similar to media/js/admin/load.js.
menu.js	Main script for the public pages, switching page without reloading. Works in similar way as media/js/admin/menu.js.
page.js	Formats menu for the public app, applying page-specific scripts. Works in similar way as media/js/admin/page.js. Specifically, it binds panel resizing; tutorial sidebar responsiveness; tutorial question hovering; download page logic, etc. See break-down below.
	app.callbackLoadD3(): Loads libraries for design-related functionality, D3, clipboard, plate.js and design.js. Once finished, it executes a callback function. When passed with 'init', it runs app.modPrimerize.fnOnLoad() as callback.
	Retrieval and Design Pre-fill: Reads flags from HTML that are passed from Django in hidden elements; waits for app.isLoaded and act.
	Tutorial Sidebar: Hide when small screen (resize_degree = 1); show on left side and share the screen with main body (resize_degree = 2); show on side as floating while main body is centered (resize_degree = 3).
	Home Page: Submit retrieval form with redirect; filter JOB_ID input.
	Tutorial and Protocol: takes care of the window.width() and scrollSpy similarly as media/js/admin/doc.js; DNA/RNA concentration calculator; example 96-well plates rendering using app.callbackLoadD3().
	Code Download: AJAX POST form submit and enable download if success; download link submits a form with the user information for validation.
design.js	Interactive script for Design1D, Design2D, and Design3D job page. Creates the app.modPrimerize module and sets app.isLoaded flag. The app.modPrimerize module keeps track of the current job_id and job_type.
	app.modPrimerize.fnUpdateFields(): update input form values from the JSON response.
	app.modPrimerize.fnAjaxLoadHTML(): Loads the result HTML page into output section. It also binds result pre-fill buttons, and interactive hovering for Design3D results.
	app.modPrimerize.fnAjaxRefreshResult(): Controls page refreshing upon job submission; it calls app.modPrimerize.fnAjaxLoadHTML() with setInterval(); and keeps refreshing until it's no longer the "waiting" page (i.e., run finished with either success or error). This refreshing behavior makes sure the result is updated while the run is underway, if the user stays waiting on the page. The current window URL is updated to /result/?job_id= with the actual JOB_ID once the run finishes.
	app.modPrimerize.fnAjaxSubmitJob(): Handles AJAX response from job submission; renders error cases and/or update fields and refresh results. The JOB_ID is assigned by python and returned inside the JSON response.
	app.modPrimerize.fnAjaxRetrieveResult(): Used for user retrieval a result for a given JOB_ID from home page.
	app.modPrimerize.fnOnSubmit(): Calls app.modPrimerize.fnAjaxSubmitJob(), freezes inputs.
	app.modPrimerize.fnOnDisable(): Disables form temporarily to prevent repeated form submission. Primer sets and structures are disabled upon form submission to make sure the original hidden inputs are up-to-date with the visible ones, and re-enabled right after AJAX POST.
	app.modPrimerize.fnTrackInputLength(): Sequence length tracking on keyup event.
	app.modPrimerize.fnTrackInputLength(): Input disabling / REGEX filtering, sequence length tracking and warning toggle for primary sequence input (on blur event).
	app.modPrimerize.fnTrackPrimerLength(), app.modPrimerize.fnTrackStructureLength(): Updates length display and color flags on keyup events.
	app.modPrimerize.fnTrackPrimerList(), app.modPrimerize.fnTrackStructureList(): Updates the hidden for actual form (on blur events). The inherited input boxes for primer sets and structures from Django are hidden in order to use the rich multi-input interface. The original hidden inputs are actually used for form submission.
	app.modPrimerize.fnSyncPrimerInput(), app.modPrimerize.fnSyncStructureInput(): Updates displayed input values from JSON response (either cleaned up by server after submission, or retrieval job); also toggles the availability of is_exclude checkbox.
	app.modPrimerize.fnExpandPrimerInput(), app.modPrimerize.fnExpandStructureInput(): Adds more (pair of) inputs for the fields.
	app.modPrimerize.fnOnLoad(): Main script for events binding, and AJAX POST forms to prevent page refresh. When the page is referred by design_2d_from_1d(), design_3d_from_1d(), or design_3d_from_2d(), the pre-filled results are passed simiarly as the case of retrieving a result.
plate.js	Core script that handles 96-well plate drawing using d3.js. Creates the app.mod96Plate module.
	app.mod96Plate.cell_radius, app.mod96Plate.cell_radius, app.mod96Plate.cell_radius: Default parameters for SVG dimentions.
	app.mod96Plate.x_data, app.mod96Plate.y_data: Constants for axis labels.
	app.mod96Plate.tooltip: Handler for the tooltip element.
	app.mod96Plate.fnGetCoordY(), app.mod96Plate.fnGetCoordY(): Locates a coordinate to the 96-well plate graph.
	app.mod96Plate.fnGetStrokeColor(), app.mod96Plate.fnGetFillColor(): Get current color for the well. Special colors are avaiable and parsed; this is mainly used by the /protocol/ page, as well as Wild-Type primer color override for Design3D jobs.
	app.mod96Plate.fnDrawSinglePlate(): Draw a 96-well plate based on input data on given HTML element. The flag specifies whether to enable tooltip on hover.
	app.mod96Plate.fnDrawResultPlates(): Draw all plate results in SVG containers of #svg_plt_?prm? for a page. It makes a AJAX call for a JSON file, resets cell dimensions, and calls app.mod96Plate.fnDrawSinglePlate() for each plate.

admin/ Admin Javascript files.

File	Description
_*.js	Vendor libraries for django-suit and django-filemanager.
apache.js	Makes AJAX calls to /admin/stat/apache/, which passes through src/admin.py to restyle_apache() in src/console.py. The page refreshes every 3 seconds by setTimeout().
clock.js	Displays real-time clock on navigation bar.
doc.js	Used by /admin/man/, /admin/ref/ and /admin/doc/ pages for scrollSpy side-bar resizing according to window.width().
gapi.js	Uses gviz-api.py (not Google Analytics API) for /admin/aws/, /admin/ga/, and /admin/git/ page dashboard. Makes AJAX calls to /admin/stat/(aws
home.js	Makes AJAX calls to /admin/stat/sys/, /admin/stat/backup/ and /admin/stat/ver/. Additionally, makes AJAX calls to /admin/backup/form/, which passes through src/admin.py to get_backup_form() in src/console.py; and /admin/dash/dash/, which passes to get_dash() in src/admin.py.
load.js	Loads vendor libraries using CDN, or fallback to local files. Uses head.load library. It checks jQuery availability from https://cdnjs.com/ first, and decides CDN availability and saves to app.isCDN. Uses head.test() to dynamically load all Javascript dependencies.All Javascript files should be loaded from here, i.e. no more <script> tag in HTML!
menu.js	Main script for the admin app, switching page without reloading.
	app.fnOnLoad() initiates the view with animation;
	app.fnNavCollapse() controls navigation bar behavior on resize;
	app.fnChangeLocation() updates the app.href and reloads the page content (excluding navigation). Calls app.fnChangeView();
	app.fnChangeView() updates side navigation highlighting, calls app.fnParseLocation() and app.fnChangeBreadcrumb(), runs page.js for new content, and calls app.callbackChangeView() if defined;
	app.fnChangeBreadcrumb() updates breadcrumb banner for each page;
	app.fnParseLocation() figures out the current page path and stores to app.key and app.page.
	Note that the window.resize() methods use setTimeout() to prevent overlapping trigger of the event that results in delay in updating the view.
page.js	Formats menu (sidebar, navbar, breadcrumb, highlighting, collapsing), and Date/Time <input> for admin pages. Loads required additional <script> for pages. Called by menu.js.
table.js	Injection of Javascript to format table (column width and icon for <th>).
util.js	Used by /admin/backup/ page. Makes AJAX calls to /admin/stat/backup/ and /admin/stat/ver/, which passes to get_ver() in src/admin.py. Controls page behavior and responses.