Upload proposed-GUI.html

templates/proposed-GUI.html

@@ -240,7 +240,7 @@
         </div>
       </div>
    
-      <div id="ratios">   </div>
+      <div id="ratios">   </div> 
    
       <div id="radiosColors" hidden="until-found">
 
@@ -783,6 +783,7 @@
 
         <div class="modal-footerLegend">
             <button id="LegendCancelBtn" class="legend-btn cancel-btn">Cancel</button>
+            <button id="LegendSelectAllBtn" class="legend-btn selectall-btn">Select All</button>
             <button id="LegendSubmitBtn" class="legend-btn submit-btn">Submit</button>
         </div>
 
@@ -5650,8 +5651,167 @@ function callrefreshAPI(){
                       checkbox.type = "checkbox";
 
                       // --- create label ---
-                      const label = document.createElement("label");
-                      label.textContent = name;
+                      let nameControl;
+                      if (name === "Hatch") {
+                        const idx = i; // your loop index
+                        const wrapper = document.createElement("div");
+                        wrapper.style.position = "relative";
+                        wrapper.style.display = "inline-block";
+                        wrapper.style.minWidth = "220px";
+
+                        // Create textarea (single box, wraps, auto-resizes up to 2 lines)
+                        const ta = document.createElement("textarea");
+                        ta.rows = 1;
+                        ta.value = name;
+                        ta.placeholder = "Type or choose...";
+                        ta.style.resize = "none";
+                        ta.style.overflow = "hidden";
+                        ta.style.boxSizing = "border-box";
+                        ta.style.width = "100%";
+                        ta.style.background = "white";
+                        ta.style.border = "1px solid #aaa";
+                        ta.style.padding = "6px 8px";
+                        ta.style.lineHeight = "1.2";
+                        ta.style.borderRadius = "4px";
+
+                        // Make textarea inherit label font characteristics so it matches exactly
+                        ta.style.fontFamily = "inherit";
+                        ta.style.fontSize = "inherit";
+                        ta.style.fontWeight = "inherit";
+                        ta.style.color = "inherit";
+
+                        // Auto-resize function: fit up to maxLines
+                        const computedFontSize = parseFloat(getComputedStyle(ta).fontSize) || 14;
+                        const lineHeightPx = computedFontSize * 1.2;
+                        const maxLines = 2;
+                        function autoResizeTextarea() {
+                          ta.style.height = "auto";
+                          const scrollH = ta.scrollHeight;
+                          const maxHeight = Math.round(lineHeightPx * maxLines) + 12;
+                          if (scrollH > maxHeight) {
+                            ta.style.height = maxHeight + "px";
+                            ta.style.overflowY = "auto";
+                          } else {
+                            ta.style.height = scrollH + "px";
+                            ta.style.overflowY = "hidden";
+                          }
+                        }
+                        // initial resize
+                        setTimeout(autoResizeTextarea, 0);
+
+                        // suggestion box
+                        const sugg = document.createElement("div");
+                        sugg.style.position = "absolute";
+                        sugg.style.left = "0";
+                        sugg.style.top = "calc(100% + 6px)";
+                        sugg.style.width = "100%";
+                        sugg.style.maxHeight = "180px";
+                        sugg.style.overflowY = "auto";
+                        sugg.style.border = "1px solid #ccc";
+                        sugg.style.background = "white";
+                        sugg.style.boxShadow = "0 6px 18px rgba(0,0,0,0.08)";
+                        sugg.style.zIndex = "9999";
+                        sugg.style.display = "none";
+                        sugg.style.borderRadius = "4px";
+                        sugg.style.padding = "2px 0";
+
+                        // suggestion item style function (inherits label font)
+                        function makeSuggestionItem(text) {
+                          const item = document.createElement("div");
+                          item.textContent = text;
+                          item.style.padding = "8px 10px";
+                          item.style.cursor = "pointer";
+                          item.style.whiteSpace = "normal";
+                          item.style.wordBreak = "break-word";
+                          item.style.fontFamily = "inherit";
+                          item.style.fontSize = "inherit";
+                          item.style.fontWeight = "inherit";
+                          item.style.color = "inherit";
+                          item.tabIndex = 0;
+                          item.addEventListener("mouseenter", () => item.style.background = "#f5f5f5");
+                          item.addEventListener("mouseleave", () => item.style.background = "white");
+                          item.addEventListener("click", () => {
+                            ta.value = text;
+                            response[idx][0] = text;
+                            autoResizeTextarea();
+                            hideSuggestions();
+                            ta.focus();
+                          });
+                          item.addEventListener("keydown", (e) => {
+                            if (e.key === "Enter") { e.preventDefault(); item.click(); }
+                          });
+                          return item;
+                        }
+
+                        // gather other names (dedup, exclude "Hatch")
+                        const otherNames = Array.from(new Set(
+                          response.map((r, j) => (r && r[0]) ? r[0] : `Item ${j}`)
+                        )).filter(n => n !== "Hatch");
+
+                        function populateSuggestions(filter = "") {
+                          sugg.innerHTML = "";
+                          const filtered = (filter.trim() === "")
+                            ? otherNames
+                            : otherNames.filter(n => n.toLowerCase().includes(filter.toLowerCase()));
+
+                          if (filtered.length === 0) {
+                            const none = document.createElement("div");
+                            none.textContent = "(no suggestions)";
+                            none.style.padding = "8px";
+                            none.style.color = "#777";
+                            none.style.fontFamily = "inherit";
+                            none.style.fontSize = "inherit";
+                            sugg.appendChild(none);
+                            return;
+                          }
+                          filtered.forEach(n => sugg.appendChild(makeSuggestionItem(n)));
+                        }
+
+                        function showSuggestions() {
+                          populateSuggestions(ta.value);
+                          sugg.style.display = "block";
+                        }
+                        function hideSuggestions() { sugg.style.display = "none"; }
+
+                        // Show full list on focus
+                        ta.addEventListener("focus", () => {
+                          populateSuggestions("");
+                          sugg.style.display = "block";
+                        });
+
+                        // Filter while typing and update response
+                        ta.addEventListener("input", (e) => {
+                          response[idx][0] = e.target.value;
+                          autoResizeTextarea();
+                          populateSuggestions(e.target.value);
+                          sugg.style.display = "block";
+                        });
+
+                        // keyboard handling for textarea
+                        ta.addEventListener("keydown", (e) => {
+                          if (e.key === "ArrowDown") {
+                            const first = sugg.querySelector("div[tabindex]");
+                            if (first) { first.focus(); e.preventDefault(); }
+                          }
+                        });
+
+                        // hide suggestions when clicking outside
+                        document.addEventListener("click", function docClick(ev) {
+                          if (!wrapper.contains(ev.target)) hideSuggestions();
+                        });
+
+                        // append and set nameControl
+                        wrapper.appendChild(ta);
+                        wrapper.appendChild(sugg);
+                        nameControl = wrapper;
+                      } else {
+                        const label = document.createElement("label");
+                        label.textContent = name;
+                        nameControl = label;
+                      }
+
+
+
 
                       // --- create color box ---
                       const colorBox = document.createElement("div");
@@ -5662,8 +5822,9 @@ function callrefreshAPI(){
 
                       // --- add all items into the line ---
                       line.append(checkbox);
-                      line.append(label);
                       line.append(colorBox);
+                      line.append(nameControl);
+                      
                       // line.append(checkbox,label,colorBox)
 
                       LegendContent.append(line);
@@ -5671,6 +5832,25 @@ function callrefreshAPI(){
 
                 }
 
+
+                let allSelected = false;  // toggle flag
+
+                document.getElementById("LegendSelectAllBtn").onclick = function () {
+                    const checkboxes = LegendContent.querySelectorAll("input[type='checkbox']");
+
+                    allSelected = !allSelected; // toggle state
+
+                    checkboxes.forEach(box => box.checked = allSelected);
+
+                    // Optional: change button text
+                    if (allSelected) {
+                        this.textContent = "Deselect All";
+                    } else {
+                        this.textContent = "Select All";
+                    }
+                };
+
+
                 // Cancel button: closes popup
                 document.getElementById("LegendCancelBtn").onclick = function() {
                     ColorsCheckPopup.style.display = "none";
@@ -5687,7 +5867,7 @@ function callrefreshAPI(){
                         const color = response[idx][3];  // <--- correct index
                         // console.log(name)
                         // console.log(color)
-                        checkedItems.push(color);
+                        checkedItems.push(name,color);
                       }
                         // if (box.checked) checkedItems.push(response[idx][0],`rgb(${response[idx][1][0]}, ${response[idx][1][1]}, ${response[idx][1][2]})`); 
                     });