Remove spinner after an export is complete

[sashadev-sky]

Please note we are preparing to participate in Google Code-in, and have reserved this issue for GCI participants - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

Problem

LDI provides the ability to export multiple images.
Demo it here: https://publiclab.github.io/Leaflet.DistortableImage/examples/select.html
by

• ctrl + clicking on one or more images.
• A single toolbar for all of them will appear in the topleft corner.
• Click the top icon to begin export
• Open your developer console to see updates on the status

While the export is in progress a spinner icon appears, but it does not yield back to the original export icon after completion.

We would like it to do so.

Solution:

Relevant information:

• https://github.com/publiclab/Leaflet.DistortableImage/blob/main/src/edit/actions/ExportAction.js - this is the file for the export action. In addHooks we
  • if (edit instanceof L.DistortableImage.Edit) { edit._getExport(); } Single image instances have a handler class L.DistortableImage.Edit that triggers a single image export edit._getExport(); (you can test this one by clicking on any image and hitting the export icon on its attached toolbar). Multiple images have a separate handler L.DistortableCollection.Edit that calls the multiple export function, edit.startExport(), which you demo'd earlier. We check which one to call.
  • if its multiple, follows are method that switch the action's icon to the spinner, and add the loader class to it to animate it's spin via css.
  • Then a call to the multiple export function edit.startExport()

Leaflet.DistortableImage/src/edit/actions/ExportAction.js

Lines 24 to 35 in f537898

	addHooks: function() {
	var edit = this._overlay.editing;
	if (edit instanceof L.DistortableImage.Edit) { edit._getExport(); }
	else {
	L.IconUtil.toggleXlink(this._link, 'get_app', 'spinner');
	L.IconUtil.toggleTitle(this._link, 'Export Images', 'Loading...');
	L.IconUtil.addClassToSvg(this._link, 'loader');
	edit.startExport();
	}
	},
	});

• https://github.com/publiclab/Leaflet.DistortableImage/blob/main/src/edit/DistortableCollection.Edit.js
  • In startExport, follow the logic to find the relevant lines where the export completes, and use this knowledge to remove the loader icon and render the original export icon again.

Leaflet.DistortableImage/src/edit/DistortableCollection.Edit.js

Lines 194 to 257 in f537898

	startExport: function(opts) {
	opts = opts || {};
	opts.collection = opts.collection || this._group.generateExportJson();
	opts.frequency = opts.frequency || 3000;
	opts.scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
	var statusUrl;
	var updateInterval;
	// this may be overridden to update the UI to show export progress or completion
	// eslint-disable-next-line require-jsdoc
	function _defaultUpdater(data) {
	data = JSON.parse(data);
	// optimization: fetch status directly from google storage:
	if (statusUrl !== data.status_url && data.status_url.match('.json')) {
	statusUrl = data.status_url;
	}
	if (data.status === 'complete') {
	clearInterval(updateInterval);
	}
	if (data.status === 'complete' && data.jpg !== null) {
	alert('Export succeeded. http://export.mapknitter.org/' + data.jpg);
	}
	// TODO: update to clearInterval when status == "failed" if we update that in this file:
	// https://github.com/publiclab/mapknitter-exporter/blob/main/lib/mapknitterExporter.rb
	console.log(data);
	}
	// receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
	// this may be overridden to integrate with any UI
	// eslint-disable-next-line require-jsdoc
	function _defaultHandleStatusUrl(data) {
	console.log(data);
	statusUrl = '//export.mapknitter.org' + data;
	opts.updater = opts.updater || _defaultUpdater;
	// repeatedly fetch the status.json
	updateInterval = setInterval(function intervalUpdater() {
	$.ajax(statusUrl + '?' + Date.now(), {// bust cache with timestamp
	type: 'GET',
	crossDomain: true,
	}).done(function(data) {
	opts.updater(data);
	});
	}, opts.frequency);
	}
	// eslint-disable-next-line require-jsdoc
	function _fetchStatusUrl(collection, scale) {
	opts.handleStatusUrl = opts.handleStatusUrl || _defaultHandleStatusUrl;
	$.ajax({
	url: '//export.mapknitter.org/export',
	crossDomain: true,
	type: 'POST',
	data: {
	collection: JSON.stringify(collection.images),
	scale: scale,
	},
	success: opts.handleStatusUrl, // this handles the initial response
	});
	}
	_fetchStatusUrl(opts.collection, opts.scale);
	},

• We use SVG icons, with a simple system for rendering the icons in JS dynamically. Follow the pattern of:

# hint - we will want 'get_app' back
 L.IconUtil.toggleXlink(this._link, 'get_app', 'spinner'); 

# toggles the tooltip
 L.IconUtil.toggleTitle(this._link, 'Export Images', 'Loading...'); 

# adds a css spinner class
 L.IconUtil.addClassToSvg(this._link, 'loader'); 

to reverse it.

• This is enough to solve this but if you want to understand more about our SVG process: https://github.com/publiclab/Leaflet.DistortableImage/wiki/SVG-Icon-System

💬 Get help

If you need any help - here are some options:

• Comment below
• Join our gitter chat at https://gitter.im/publiclab/publiclab

Labeled hard because requires a deeper understanding of LDI's moving parts.

[sashadev-sky]

Uploaded to GCI Dashboard

[SidharthBansal]

Published