From feb885a20446cc6b3da47366c4e2eab3954048a7 Mon Sep 17 00:00:00 2001
From: SimFG <bang.fu@zilliz.com>
Date: Thu, 9 Jan 2025 10:03:02 +0800
Subject: [PATCH] enhance: [2.4] update the expr static web page (#39089)

issue: #39083
pr: #39082
/kind improvement
Three new functions of the static web page:
1. The input box can be expanded and scrolled if it exceeds the maximum
size
2. Input history
3. It will simply check whether the quotation marks and brackets appear
in pairs

Signed-off-by: SimFG <bang.fu@zilliz.com>
---
 internal/http/static/index.html | 144 +++++++++++++++++++++++++++++++-
 1 file changed, 140 insertions(+), 4 deletions(-)

diff --git a/internal/http/static/index.html b/internal/http/static/index.html
index 246f8970db..4f74f1297c 100644
--- a/internal/http/static/index.html
+++ b/internal/http/static/index.html
@@ -41,7 +41,8 @@
             font-size: 1.25em;
         }
         .card input,
-        .card button {
+        .card button,
+        .card textarea {
             width: 100%;
             box-sizing: border-box;
             padding: 10px;
@@ -50,6 +51,18 @@
             border-radius: 3px;
             font-size: 1em;
         }
+        .card textarea {
+            resize: vertical;
+            overflow-y: auto;
+        }
+        #auth {
+            resize: none;
+            max-height: 50px;
+        }
+        #code {
+            min-height: 100px;
+            max-height: 200px;
+        }
         .card button {
             background-color: #007bff;
             color: #ffffff;
@@ -59,6 +72,30 @@
         .card button:hover {
             background-color: #0056b3;
         }
+        .input-group {
+            position: relative;
+        }
+        .history {
+            max-height: 200px;
+            overflow-x: auto;
+            overflow-y: auto;
+            position: absolute;
+            top: 0;
+            left: -320px;
+            display: none;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            padding: 5px;
+            background-color: #f9f9f9;
+            width: 300px;
+            z-index: 100;
+        }
+        .history div {
+            padding: 5px;
+        }
+        .history div:hover {
+            background-color: #e9ecef;
+        }
         .result {
             text-align: left;
         }
@@ -84,7 +121,6 @@
             height: 35%;
             margin: 0px;
         }
-
         .hint p {
             width: 100%;
             height: 100%;
@@ -111,8 +147,16 @@
 <div class="container">
     <div class="card">
         <h2>Input</h2>
-        <input type="text" id="auth" placeholder="Enter auth" onkeydown="handleEnter(event, 'code')">
-        <input type="text" id="code" placeholder="Enter code" onkeydown="handleEnter(event, 'submitButton')">
+        <!-- <input type="text" id="auth" placeholder="Enter auth" onkeydown="handleEnter(event, 'code')">
+        <input type="text" id="code" placeholder="Enter code" onkeydown="handleEnter(event, 'submitButton')"> -->
+        <div class="input-group">
+            <div class="history" id="history1"></div>
+            <textarea id="auth" placeholder="Enter auth" onkeydown="handleEnter(event, 'code')"></textarea>
+        </div>
+        <div class="input-group">
+            <div class="history" id="history2"></div>
+            <textarea id="code" placeholder="Enter code" onkeydown="handleEnter(event, 'submitButton')"></textarea>
+        </div>
         <button id="submitButton" onclick="submitForm()">Submit</button>
     </div>
     <div class="card result" id="result">
@@ -135,6 +179,10 @@ Currently, the objects injected by expr include: <code>param</code>, <code>proxy
 3. Functions with multiple return values cannot be chained.</p>
 </div>
 <script>
+    const inputBoxes = document.querySelectorAll('textarea');
+    const histories = [...document.querySelectorAll('.history')];
+    let historiesData = [[], []];
+
     function handleEnter(event, nextElementId) {
         if (event.key === 'Enter') {
             event.preventDefault();
@@ -146,9 +194,27 @@ Currently, the objects injected by expr include: <code>param</code>, <code>proxy
     }
 
     function submitForm() {
+        hideAllHistories();
         const auth = document.getElementById('auth').value;
         const code = document.getElementById('code').value;
 
+        if (!isBalanced(code)) {
+            alert('There is an error in the expression. Check whether the brackets and quotation marks are missing.');
+            return;
+        }
+
+        inputBoxes.forEach((inputBox, index) => {
+            const inputValue = inputBox.value.trim();
+            if (inputValue === '') {
+                return;
+            }
+            if (inputValue && !historiesData[index].includes(inputValue)) {
+                historiesData[index].push(inputValue);
+                updateHistory(index);
+            }
+            histories[index].style.display = 'none';
+        });
+
         if (auth && code) {
             const xhr = new XMLHttpRequest();
             const hostUrl = window.location.origin;
@@ -165,6 +231,76 @@ Currently, the objects injected by expr include: <code>param</code>, <code>proxy
             alert('Please fill in both fields.');
         }
     }
+
+    inputBoxes.forEach((inputBox, index) => {
+        inputBox.addEventListener('focus', () => {
+            hideAllHistories();
+            if (inputBox.value === '' && historiesData[index].length > 0) {
+                histories[index].style.display = 'block';
+                updateHistory(index);
+            }
+        });
+
+        inputBox.addEventListener('blur', () => {
+            setTimeout(() => {
+                histories[index].style.display = 'none';
+            }, 500);
+        });
+
+        inputBox.addEventListener('input', () => {
+            hideAllHistories();
+            if (!inputBox.value && historiesData[index].length > 0) {
+                histories[index].style.display = 'block';
+            }
+        });
+    });
+
+    function updateHistory(index) {
+        if (historiesData[index].length > 0) {
+            histories[index].innerHTML = historiesData[index].map(item =>
+                `<div onclick="fillInput(${index}, '${item}')">${item}</div>`
+            ).join('');
+            histories[index].style.display = 'block';
+        } else {
+            console.log('no history');
+            histories[index].style.display = 'none';
+        }
+    }
+
+    function fillInput(index, value) {
+        inputBoxes[index].value = value;
+        histories[index].style.display = 'none';
+    }
+
+    function hideAllHistories() {
+        histories.forEach(history => {
+            history.style.display = 'none';
+        });
+    }
+
+    function isBalanced(input) {
+        const stack = [];
+        const pairs = {
+            "'": "'",
+            '"': '"',
+            '(': ')',
+            '[': ']',
+            '{': '}',
+        };
+
+        for (let char of input) {
+            if (pairs[char]) {
+                stack.push(char);
+            }
+            else if (Object.values(pairs).includes(char)) {
+                if (stack.length === 0 || pairs[stack.pop()] !== char) {
+                    return false;
+                }
+            }
+        }
+
+        return stack.length === 0;
+    }
 </script>
 </body>
 </html>
\ No newline at end of file