From db29f8329923e4e68c1bbae9bc70b63bef8ed5ed Mon Sep 17 00:00:00 2001
From: oxyplay <max@oxyplay.com>
Date: Tue, 1 Aug 2023 09:10:55 +0100
Subject: [PATCH] ui issues fixes (#65)

* when adding large repo, files count is hidden

* default SVG for fine tuning

* fix deleting last file in sources
---
 self_hosting_machinery/webgui/static/style.css       |  1 +
 self_hosting_machinery/webgui/static/tab-upload.html |  2 +-
 self_hosting_machinery/webgui/static/tab-upload.js   | 12 ++++++++++--
 self_hosting_machinery/webgui/tab_finetune.py        | 12 +++++++++---
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/self_hosting_machinery/webgui/static/style.css b/self_hosting_machinery/webgui/static/style.css
index 2ba26daa..fa9ec23a 100644
--- a/self_hosting_machinery/webgui/static/style.css
+++ b/self_hosting_machinery/webgui/static/style.css
@@ -195,6 +195,7 @@ h3 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    margin-right: 5px;
 }
 .upload-tab-table-files td:nth-child(2),
 .upload-tab-table-files th:nth-child(2) {
diff --git a/self_hosting_machinery/webgui/static/tab-upload.html b/self_hosting_machinery/webgui/static/tab-upload.html
index ad7c4a2a..d78cb8ea 100644
--- a/self_hosting_machinery/webgui/static/tab-upload.html
+++ b/self_hosting_machinery/webgui/static/tab-upload.html
@@ -13,7 +13,7 @@ <h3>Code and Text Sources</h3>
           </tr>
         </thead>
         <tbody id="upload-tab-table-body-files">
-          <tr><td>No sources added.</td></tr>
+          <tr><td>No sources added.</td><td></td><td></td><td></td><td></td></tr>
         </tbody>
       </table>
       <div class="sources-buttons">
diff --git a/self_hosting_machinery/webgui/static/tab-upload.js b/self_hosting_machinery/webgui/static/tab-upload.js
index 3dc8c18e..90aee5c7 100644
--- a/self_hosting_machinery/webgui/static/tab-upload.js
+++ b/self_hosting_machinery/webgui/static/tab-upload.js
@@ -164,9 +164,12 @@ function reset_ftf_progress() {
 function render_tab_files(data) {
     const files = document.getElementById("upload-tab-table-body-files");
     let i = 0;
-    if(Object.keys(data.uploaded_files).length > 0) {
+    if(Object.keys(data.uploaded_files).length >= 0) {
         files.innerHTML = "";
     }
+    if(Object.keys(data.uploaded_files).length === 0) {
+        files.innerHTML = `<tr><td>No sources added.</td><td></td><td></td><td></td><td></td></tr>`;
+    }
     for(let item in data.uploaded_files) {
         const row = document.createElement('tr');
         row.setAttribute('data-file', item);
@@ -257,9 +260,14 @@ function render_tab_files(data) {
                         event.target.nextElementSibling.style.display = 'none';
                     });
                 } else {
-                    target_cell.innerHTML = `<span class="file-status badge rounded-pill ${status_color}">${current_status}`;
+                    target_cell.innerHTML = `<span class="file-status badge rounded-pill ${status_color}">${current_status}</span>`;
                 }
                 if (current_status == "working" || current_status == "starting") {
+                    if(item_object.files === undefined) {
+                        target_cell.innerHTML = `<span class="file-status badge rounded-pill ${status_color}">${current_status}</span>`;
+                    } else {
+                        target_cell.innerHTML = `<span class="file-status badge rounded-pill ${status_color}">${current_status}</span><span>${item_object.files} files</span>`;
+                    }
                     any_working = true;
                 }
                 break;
diff --git a/self_hosting_machinery/webgui/tab_finetune.py b/self_hosting_machinery/webgui/tab_finetune.py
index 440c013d..18d910dd 100644
--- a/self_hosting_machinery/webgui/tab_finetune.py
+++ b/self_hosting_machinery/webgui/tab_finetune.py
@@ -222,9 +222,15 @@ async def _tab_funetune_progress_svg(self, run_id: str):
         if os.path.exists(svg_path):
             svg = open(svg_path, "r").read()
         else:
-            svg = "<svg width=\"432\" height=\"216\" xmlns=\"http://www.w3.org/2000/svg\">"
-            svg += '<path d="M 50 10 L 140 110 L 350 200 L 50 200 L 50 10" stroke="#AAA" stroke-width="2" fill="#DDD" />'
-            svg += "</svg>"
+            svg = '<svg width="432" height="217" viewBox="0 0 432 217" fill="none" xmlns="http://www.w3.org/2000/svg">'
+            svg += '<line x1="50" y1="10.496" x2="350" y2="10.496" stroke="#EFEFEF"/>'
+            svg += '<line x1="50" y1="200.496" x2="350" y2="200.496" stroke="#EFEFEF"/>'
+            svg += '<line x1="50" y1="162.496" x2="350" y2="162.496" stroke="#EFEFEF"/>'
+            svg += '<line x1="50" y1="124.496" x2="350" y2="124.496" stroke="#EFEFEF"/>'
+            svg += '<line x1="50" y1="86.496" x2="350" y2="86.496" stroke="#EFEFEF"/>'
+            svg += '<line x1="50" y1="48.496" x2="350" y2="48.496" stroke="#EFEFEF"/>'
+            svg += '<path d="M50 10.996L140 110.996L200.98 89.6939L350 200.996" stroke="#CDCDCD" stroke-width="2"/>'
+            svg += '</svg>'
         return Response(svg, media_type="image/svg+xml")
 
     async def _tab_finetune_schedule_save(self, config: TabFinetuneConfig):