From 2b82b6a74ecb4f5ac421e5bb4acb1e5e7f7296cf Mon Sep 17 00:00:00 2001 From: ajugo Date: Wed, 3 May 2023 16:38:07 +0200 Subject: [PATCH] Include plate templates metadata to the protocol import/export [SCI-8354] (#5348) --- .../protocols/import_export/eln_table.js | 109 ++++++++---------- .../protocols/import_export/import.js | 3 +- app/assets/stylesheets/themes/scinote.scss | 31 ++++- 3 files changed, 83 insertions(+), 60 deletions(-) diff --git a/app/assets/javascripts/protocols/import_export/eln_table.js b/app/assets/javascripts/protocols/import_export/eln_table.js index d8fff26b0..9e57af09e 100644 --- a/app/assets/javascripts/protocols/import_export/eln_table.js +++ b/app/assets/javascripts/protocols/import_export/eln_table.js @@ -1,76 +1,69 @@ +/* eslint-disable no-unused-vars */ + function hex2a(hexx) { - var hex = hexx.toString(); // Force conversion - var str = ""; - for (var i = 0; i < hex.length; i += 2) { - str += String.fromCharCode(parseInt(hex.substr(i, 2), 16)); + const hexString = hexx.toString(); // Force conversion + let asciiString = ''; + for (let i = 0; i < hexString.length; i += 2) { + asciiString += String.fromCharCode(parseInt(hexString.substr(i, 2), 16)); } - return str; + return asciiString; } -function generateElnTable(id, content) { - /*********************************************/ - /* INNER FUNCTIONS */ - /*********************************************/ - function colName(n) { - var ordA = "A".charCodeAt(0); - var ordZ = "Z".charCodeAt(0); - var len = ordZ - ordA + 1; +function getMetadataCellValue(jsonData, row, col) { + if (jsonData == null) return ''; - var s = ""; - while(n >= 0) { - s = String.fromCharCode(n % len + ordA) + s; + const key = `${row}:${col}`; + for (let i = 0; i < jsonData.length; i += 1) { + const item = jsonData[i]; + const itemKey = `${item.row}:${item.col}`; + if (itemKey === key) { + return item.className; + } + } + return null; +} + +function generateElnTable(content, tableMetadata) { + function colName(n) { + const asciiA = 'A'.charCodeAt(0); + const asciiZ = 'Z'.charCodeAt(0); + const len = (asciiZ - asciiA) + 1; + let name = ''; + while (n >= 0) { + name = String.fromCharCode((n % len) + asciiA) + name; n = Math.floor(n / len) - 1; } - return s; + return name; } - /*********************************************/ - /* ACTUAL FUNCTION CODE */ - /*********************************************/ - var txt = hex2a(content); - var jstr = JSON.parse(txt); + const decodedContent = hex2a(content); + const isPlateTemplate = tableMetadata.plateTemplate === 'true'; + const tableData = JSON.parse(decodedContent); + const numRows = tableData.data.length + 1; + const numCols = tableData.data[0].length + 1; - var rows = jstr.data.length + 1; - var cols = jstr.data[0].length + 1; + let tableRows = ''; - var str = rows + "|" + cols; + for (let i = 0; i < numRows; i += 1) { + let tableCells = ''; - var html_s = ""; - var html_e = "
"; + for (let j = 0; j < numCols; j += 1) { + let cellData = ''; + let cellClass = getMetadataCellValue(tableMetadata.cells, i - 1, j - 1); - var tr = ""; - for (var i = 0; i < rows; i++) { - var tr_s = ""; - var th = ""; - var d = ""; - var d_str = ""; - for (var j = 0; j < cols; j++) { - if ((i > 0) && (j > 0)) { - if (jstr.data[i - 1][j - 1] !== null) { - d = jstr.data[i - 1][j - 1]; - d_str = "" + d; - } else { - d = ""; - d_str = "" + d; - } - } else { - if ((i == 0) && (j == 0)) { - d = ""; - d_str = "" + d; - } else if (i == 0) { - d = colName(j - 1); - d_str = "" + d; - } else { - d = i.toString(); - d_str = "" + d; - } + if (i > 0 && j > 0 && tableData.data[i - 1][j - 1] !== null) { + cellData = tableData.data[i - 1][j - 1]; + } else if (i === 0 && j !== 0) { + cellData = isPlateTemplate ? j.toString() : colName(j - 1); + } else if (j === 0 && i !== 0) { + cellData = isPlateTemplate ? colName(i - 1) : i.toString(); } - th = th + d_str + ""; + tableCells = `${tableCells}${cellData}`; } - var tr_e = ""; - tr = tr + tr_s + th + tr_e; + + tableRows = `${tableRows}${tableCells}`; } - var html = html_s + tr + html_e; - return $.parseHTML(html); + + return $.parseHTML(`${tableRows}
`); } diff --git a/app/assets/javascripts/protocols/import_export/import.js b/app/assets/javascripts/protocols/import_export/import.js index 568aa5dc9..1be2c3fa7 100644 --- a/app/assets/javascripts/protocols/import_export/import.js +++ b/app/assets/javascripts/protocols/import_export/import.js @@ -260,13 +260,14 @@ function importProtocolFromFile( var tableId = $(tableNode).attr('id'); var tableName = $(tableNode).children('name').text(); var tableContent = $(tableNode).children('contents').text(); + var tableMetadata = JSON.parse($(tableNode).children('metadata').text()) || {}; // Generate table element var tableEl = newPreviewElement( 'table', { name: tableName } ); - var elnTableEl = generateElnTable(tableId, tableContent); + var elnTableEl = generateElnTable(tableContent, tableMetadata); tableEl.append(elnTableEl); // Now, append table element to step diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 631282a12..b3df1e839 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1,3 +1,6 @@ +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth + @import "constants"; @import "mixins"; @import "main_navigation"; @@ -863,8 +866,34 @@ ul.content-activities { width: 100%; .eln-table { - text-align: center; height: 21px; + + tr:first-child { + text-align: center; + } + + td { + &.htCenter, + &:first-child { + text-align: center; + } + + &.htRight { + text-align: right; + } + + &.htJustify { + text-align: justify; + } + + &.htMiddle { + vertical-align: middle; + } + + &.htBottom { + vertical-align: bottom; + } + } } .badge-preview {