Rotate tables to landscape depending on dimensions

paulscherrerinstitute · Feb 6, 2024 · 2a82c56 · 2a82c56
1 parent f1ac14d
commit 2a82c56
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/sci-log-db/src/__tests__/unit/service.export-snippet.unit.ts b/sci-log-db/src/__tests__/unit/service.export-snippet.unit.ts
@@ -265,4 +265,32 @@ describe('Export service unit', function (this: Suite) {
       .eql(`<div><pre class="language-python" tabindex="0"><code class="language-python"><span class="token keyword">def</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
     <span class="token keyword">return</span> <span class="token number">1</span></code></pre></div>`);
   });
+
+  tests = [
+    ['<p>not a table</p>', '<p>not a table</p>'],
+    [
+      '<figure class="table"><table><tbody><tr><td>a</td></tr></tbody></table></figure><p>&nbsp;</p>',
+      '<figure class="table"><table><tbody><tr><td>a</td></tr></tbody></table></figure><p>&nbsp;</p>',
+    ],
+    [
+      '<figure class="table"><table><tbody><tr><td>a</td></tr></tbody></table></figure>',
+      '<figure class="table"><table><tbody><tr><td>a</td></tr></tbody></table></figure>',
+    ],
+    [
+      '<figure class="table"><table><tbody><tr><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLong</td><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLong</td></tr><tr><td>1</td><td>1</td></tr></tbody></table></figure>',
+      '<figure class="table table-with-space"><table class="table-landscape"><tbody><tr><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLong</td><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLong</td></tr><tr><td>1</td><td>1</td></tr></tbody></table></figure>',
+    ],
+    [
+      '<figure class="table"><table><tbody><tr><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLong</td><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLong</td></tr><tr><td>1</td><td>1</td></tr></tbody></table></figure><p>&nbsp;</p>',
+      '<figure class="table"><table class="table-landscape"><tbody><tr><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLong</td><td>someLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLongsomeLong</td></tr><tr><td>1</td><td>1</td></tr></tbody></table></figure><p>&nbsp;</p>',
+    ],
+  ];
+  tests.forEach((t, i) => {
+    it(`table ${i}`, () => {
+      const element = textContentToHTML({textcontent: t[0]} as Paragraph);
+      expect(
+        exportService['table']({} as Paragraph, element).innerHTML,
+      ).to.be.eql(t[1]);
+    });
+  });
 });
diff --git a/sci-log-db/src/services/export-snippets.service.ts b/sci-log-db/src/services/export-snippets.service.ts
@@ -146,6 +146,7 @@ export class ExportService {
     return [
       this.textContentToHTML,
       this.code,
+      this.table,
       this.figure,
       this.tags,
       this.dateAndAuthor,
@@ -197,6 +198,28 @@ export class ExportService {
     return element;
   };
 
+  private table = (snippet: Paragraph, element: Element) => {
+    const tableElements = element.querySelectorAll('table');
+    if (tableElements.length === 0) return element;
+    tableElements.forEach(tableElement => {
+      let maxWidth = 0;
+      tableElement.querySelectorAll('tr').forEach(row => {
+        let totalWidth = 0;
+        row
+          .querySelectorAll('td')
+          .forEach(column => (totalWidth += column.innerHTML.length));
+        maxWidth = totalWidth > maxWidth ? totalWidth : maxWidth;
+      });
+      if (maxWidth < 500 / 10) return tableElement;
+      tableElement.className = 'table-landscape';
+      const parentElement = tableElement.parentElement;
+      if (parentElement?.nextElementSibling?.innerHTML !== '&nbsp;')
+        parentElement?.classList?.add('table-with-space');
+      return tableElement;
+    });
+    return element;
+  };
+
   private countSnippets(linkType?: LinkType) {
     let counter: number | string = '';
     if (linkType === 'paragraph') {

diff --git a/sci-log-db/src/services/pdf.css b/sci-log-db/src/services/pdf.css
@@ -109,18 +109,29 @@ h1 {
     margin-bottom: 0;
 }
 
+.table-landscape,
 table,
 th,
 td {
     table-layout: fixed;
-    font-size: 10px;
+    font-size: 10pt;
     width: 100%;
     border-spacing: 0;
     border-collapse: collapse;
     border: 1px solid black;
+    word-wrap: break-word;
+}
+
+.table-landscape {
     page: landscape;
 }
 
+.table-with-space::after {
+    content: "\A";
+    white-space: pre;
+    display: block;
+}
+
 img {
     max-height: 297mm;
 }