File thumbnails broken in History Panel when file is placed inside folder(s)

[mdziekon]

Mainsail Version:

2.12.0

Browser:

Firefox

Device:

Desktop PC

Operating System:

Linux

What happened?

When using History page / panel, files which are placed in folder(s) do not have proper thumbnail displayed, making it much harder to quickly find entries we are looking for. Files placed in the root directory do not exhibit this behavior.

What did you expect to happen instead?

Files with thumbnails available should have that thumbnail displayed, regardless of their location in file system.

How to reproduce this bug?

1. Create a folder
2. Place a model (with a thumbnail) in that folder
3. Print it (or at least attempt to print it so that it appears in History page)
4. Go to History page

Additional information:

This appears to be a regression caused by the refactoring done in #1274. The culprit seems to be incorrect creation of thumbnail url for "small thumbnails", which incorrectly removes the final / character needed to build correct relative thumbnail path. This does not occur for "big thumbnails".

Previous, working code:
https://github.com/mainsail-crew/mainsail/pull/1274/files#diff-21c7ea907f2434c89b31411768fd6e832d8b9afd3597a8a5cdb835343ef03319L903-L944

New, broken code:
https://github.com/mainsail-crew/mainsail/pull/1274/files#diff-26b52f4bf48f9c0010205b6d9b658c3f1f329ceaea65dae5bfc28d7b62058426R150-R180

I'll post a patch for this bug shortly, as I've already fixed it in my local version.

[meteyou]

@mdziekon your links to the preview/new code doesn't work for me. can you pls a link to the file with line itself and not in the PR view?

[mdziekon]

@meteyou right, that's probably because Github collapses both of these files by default, therefore hotlinking to specific lines does not work as intended.

Here's perma-link to working code:

mainsail/src/components/panels/HistoryListPanel.vue

Lines 903 to 944 in 8e7db0d

	getSmallThumbnail(item: ServerHistoryStateJob) {
	if ('metadata' in item && 'thumbnails' in item.metadata && item.metadata.thumbnails.length) {
	const thumbnail = item.metadata.thumbnails.find(
	(thumb: any) =>
	thumb.width >= thumbnailSmallMin &&
	thumb.width <= thumbnailSmallMax &&
	thumb.height >= thumbnailSmallMin &&
	thumb.height <= thumbnailSmallMax
	)
	let relative_url = ''
	if (item.filename.lastIndexOf('/') !== -1) {
	relative_url = item.filename.substr(0, item.filename.lastIndexOf('/') + 1)
	}
	if (thumbnail && 'relative_path' in thumbnail) {
	return `${this.apiUrl}/server/files/gcodes/${encodeURI(
	relative_url + thumbnail.relative_path
	)}?timestamp=${item.metadata.modified}`
	}
	}
	return false
	}
	getBigThumbnail(item: ServerHistoryStateJob) {
	if ('metadata' in item && 'thumbnails' in item.metadata && item.metadata.thumbnails.length) {
	const thumbnail = item.metadata.thumbnails.find((thumb: any) => thumb.width >= thumbnailBigMin)
	let relative_url = ''
	if (item.filename.lastIndexOf('/') !== -1) {
	relative_url = item.filename.substr(0, item.filename.lastIndexOf('/') + 1)
	}
	if (thumbnail && 'relative_path' in thumbnail)
	return `${this.apiUrl}/server/files/gcodes/${encodeURI(
	relative_url + thumbnail.relative_path
	)}?timestamp=${item.metadata.modified}`
	}
	return false
	}

Here's perma-link to broken code:

mainsail/src/components/panels/History/HistoryListRow.vue

Lines 150 to 180 in 866a0c6

	get smallThumbnail() {
	const thumbnail = this.thumbnails.find(
	(thumb: any) =>
	thumb.width >= thumbnailSmallMin &&
	thumb.width <= thumbnailSmallMax &&
	thumb.height >= thumbnailSmallMin &&
	thumb.height <= thumbnailSmallMax
	)
	if (!thumbnail) return false
	let relative_url = ''
	if (this.job.filename.lastIndexOf('/') !== -1) {
	relative_url = this.job.filename.substring(0, this.job.filename.lastIndexOf('/') + 1)
	}
	return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail.relative_path)}?timestamp=${this
	.job.metadata?.modified}`
	}
	get bigThumbnail() {
	const thumbnail = this.thumbnails.find((thumb: any) => thumb.width >= thumbnailBigMin)
	if (!thumbnail) return false
	let relative_url = ''
	if (this.job.filename.lastIndexOf('/') !== -1) {
	relative_url = this.job.filename.substring(0, this.job.filename.lastIndexOf('/') + 1)
	}
	return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail.relative_path)}?timestamp=${this
	.job.metadata?.modified}`
	}