From b842ffd7abdef754b19394233c59a3053553c609 Mon Sep 17 00:00:00 2001
From: Xiangpeng Hao <haoxiangpeng123@gmail.com>
Date: Fri, 27 Dec 2024 10:19:31 -0600
Subject: [PATCH] ux update

---
 index.html           |   3 +
 src/file_reader.rs   |  30 ++----
 src/main.rs          |  13 +--
 src/query_input.rs   |   4 +-
 src/query_results.rs | 237 ++++++++++++++++++++++---------------------
 5 files changed, 146 insertions(+), 141 deletions(-)

diff --git a/index.html b/index.html
index f1cec4b..d65d0ea 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,9 @@
 		}
 	</script>
 	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script>
 	<!-- Cloudflare Web Analytics -->
 	<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
 		data-cf-beacon='{"token": "cdf9b270eac24614a52f26d4b465b8ae"}'></script><!-- End Cloudflare Web Analytics -->
diff --git a/src/file_reader.rs b/src/file_reader.rs
index de93b4c..43bb875 100644
--- a/src/file_reader.rs
+++ b/src/file_reader.rs
@@ -37,7 +37,7 @@ async fn update_file(
     parquet_table_setter: WriteSignal<Option<ParquetTable>>,
 ) {
     let object_store = &*INMEMORY_STORE;
-    let path = Path::parse(format!("{}.parquet", parquet_table.table_name)).unwrap();
+    let path = Path::parse(format!("{}", parquet_table.table_name)).unwrap();
     let payload = PutPayload::from_bytes(parquet_table.bytes.clone());
     object_store.put(&path, payload).await.unwrap();
     parquet_table_setter.set(Some(parquet_table));
@@ -155,11 +155,7 @@ pub fn FileReader(
         let file_reader = web_sys::FileReader::new().unwrap();
         let file_reader_clone = file_reader.clone();
 
-        let table_name = file
-            .name()
-            .strip_suffix(".parquet")
-            .unwrap_or(&file.name())
-            .to_string();
+        let table_name = file.name();
 
         let onload = Closure::wrap(Box::new(move |_: web_sys::Event| {
             let table_name = table_name.clone();
@@ -196,8 +192,6 @@ pub fn FileReader(
             .split('/')
             .last()
             .unwrap_or("uploaded.parquet")
-            .strip_suffix(".parquet")
-            .unwrap_or("uploaded")
             .to_string();
 
         leptos::task::spawn_local(async move {
@@ -243,8 +237,6 @@ pub fn FileReader(
             .split('/')
             .last()
             .unwrap_or("uploaded.parquet")
-            .strip_suffix(".parquet")
-            .unwrap_or("uploaded")
             .to_string();
 
         leptos::task::spawn_local(async move {
@@ -315,7 +307,7 @@ pub fn FileReader(
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
                             if let Some(active_t) = active_tab.get() {
                                 if active_t == "file" {
-                                    return format!("{} border-blue-500 text-blue-600", base);
+                                    return format!("{} border-green-500 text-green-600", base);
                                 }
                             }
                             format!(
@@ -332,7 +324,7 @@ pub fn FileReader(
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
                             if let Some(active_t) = active_tab.get() {
                                 if active_t == "url" {
-                                    return format!("{} border-blue-500 text-blue-600", base);
+                                    return format!("{} border-green-500 text-green-600", base);
                                 }
                             }
                             format!(
@@ -349,7 +341,7 @@ pub fn FileReader(
                             let base = "py-2 px-1 border-b-2 font-medium text-sm";
                             if let Some(active_t) = active_tab.get() {
                                 if active_t == "s3" {
-                                    return format!("{} border-blue-500 text-blue-600", base);
+                                    return format!("{} border-green-500 text-green-600", base);
                                 }
                             }
                             format!(
@@ -420,11 +412,11 @@ pub fn FileReader(
                                                     set_url.set(event_target_value(&ev));
                                                 }
                                                 prop:value=url
-                                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                                class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                             />
                                             <button
                                                 type="submit"
-                                                class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                                                class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
                                             >
                                                 "Load from URL"
                                             </button>
@@ -454,7 +446,7 @@ pub fn FileReader(
                                                 type="text"
                                                 on:input=on_s3_bucket_change
                                                 prop:value=s3_bucket
-                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                             />
                                         </div>
                                         <div class="flex-1 min-w-[250px]">
@@ -465,7 +457,7 @@ pub fn FileReader(
                                                 type="text"
                                                 on:input=on_s3_region_change
                                                 prop:value=s3_region
-                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                             />
                                         </div>
                                         <div class="flex-1 min-w-[250px]">
@@ -476,13 +468,13 @@ pub fn FileReader(
                                                 type="text"
                                                 on:input=on_s3_file_path_change
                                                 prop:value=s3_file_path
-                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                                             />
                                         </div>
                                         <div class="flex-1 min-w-[150px] max-w-[250px] self-end">
                                             <button
                                                 type="submit"
-                                                class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                                                class="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
                                             >
                                                 "Read from S3"
                                             </button>
diff --git a/src/main.rs b/src/main.rs
index abea870..3cb1dd7 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -225,6 +225,8 @@ fn App() -> impl IntoView {
             .and_then(|table| ParquetReader::new(table).ok())
     });
 
+    let (force_update_user_input, set_force_update_user_input) = signal(false);
+
     Effect::watch(
         parquet_reader,
         move |reader, old_reader, _| {
@@ -240,9 +242,8 @@ fn App() -> impl IntoView {
                 }
                 None => match user_input.get() {
                     Some(user_input) => {
-                        // force update
-                        let new_input = format!("{} ", user_input);
-                        set_user_input.set(Some(new_input));
+                        set_user_input.set(Some(user_input));
+                        set_force_update_user_input.set(true);
                     }
                     None => {
                         logging::log!("{}", reader.info().to_string());
@@ -257,9 +258,9 @@ fn App() -> impl IntoView {
     );
 
     Effect::watch(
-        user_input,
-        move |user_input, _, _| {
-            let Some(user_input_str) = user_input else {
+        move || (force_update_user_input.get(), user_input.get()),
+        move |(_, user_input_str), _, _| {
+            let Some(user_input_str) = user_input_str else {
                 return;
             };
 
diff --git a/src/query_input.rs b/src/query_input.rs
index 890453a..38bf501 100644
--- a/src/query_input.rs
+++ b/src/query_input.rs
@@ -33,7 +33,7 @@ pub(crate) async fn execute_query_inner(
     ctx.register_object_store(object_store_url.as_ref(), object_store);
     ctx.register_parquet(
         table_name,
-        &format!("mem:///{}.parquet", table_name),
+        &format!("mem:///{}", table_name),
         ParquetReadOptions::default(),
     )
     .await?;
@@ -101,7 +101,7 @@ pub fn QueryInput(
                     on:input=move |ev| set_input_value(Some(event_target_value(&ev)))
                     prop:value=input_value
                     on:keydown=key_down
-                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                 />
                 <div class="flex items-center gap-1">
                     <button
diff --git a/src/query_results.rs b/src/query_results.rs
index e272bcc..693e176 100644
--- a/src/query_results.rs
+++ b/src/query_results.rs
@@ -132,127 +132,136 @@ pub fn QueryResultView(result: QueryResult) -> impl IntoView {
     let query_result_clone1 = result.query_result.clone();
     let query_result_clone2 = result.query_result.clone();
     let sql = result.sql_query.clone();
+    let sql_clone = sql.clone();
 
+    Effect::new(move |_| {
+        let _window = web_sys::window().unwrap();
+        let _ = js_sys::eval("hljs.highlightAll()");
+        || ()
+    });
     view! {
         <div class="mt-4 p-4 bg-white border border-gray-300 rounded-md hover:shadow-lg transition-shadow duration-200">
-            <div class="flex justify-between items-center mb-4">
-                <div class="p-2 border border-gray-200 font-mono text-sm overflow-x-auto relative group flex-grow">
-                    {sql.clone()}
-                </div>
-                <div class="flex items-center gap-2 ml-4">
-                    <button
-                        class="p-2 text-gray-500 hover:text-gray-700 relative group"
-                        aria-label="Export to CSV"
-                        on:click=move |_| {
-                            export_to_csv_inner(&query_result_clone2);
-                        }
-                    >
-                        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
-                            "Export to CSV"
-                        </span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
+            <div class="relative">
+                <div class="absolute top-0 right-0 z-10">
+                    <div class="flex items-center gap-1 rounded-md">
+                        <button
+                            class="p-2 text-gray-500 hover:text-gray-700 relative group"
+                            aria-label="Export to CSV"
+                            on:click=move |_| {
+                                export_to_csv_inner(&query_result_clone2);
+                            }
                         >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-                            />
-                        </svg>
-                    </button>
-                    <button
-                        class="p-2 text-gray-500 hover:text-gray-700 relative group"
-                        aria-label="Export to Parquet"
-                        on:click=move |_| {
-                            export_to_parquet_inner(&query_result_clone1);
-                        }
-                    >
-                        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
-                            "Export to Parquet"
-                        </span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
+                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
+                                "Export to CSV"
+                            </span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+                                />
+                            </svg>
+                        </button>
+                        <button
+                            class="p-2 text-gray-500 hover:text-gray-700 relative group"
+                            aria-label="Export to Parquet"
+                            on:click=move |_| {
+                                export_to_parquet_inner(&query_result_clone1);
+                            }
                         >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-                            />
-                        </svg>
-                    </button>
-                    <button
-                        class="p-2 text-gray-500 hover:text-gray-700 relative group animate-on-click"
-                        aria-label="Copy SQL"
-                        on:click=move |_| {
-                            let window = web_sys::window().unwrap();
-                            let navigator = window.navigator();
-                            let clipboard = navigator.clipboard();
-                            let _ = clipboard.write_text(&sql);
-                        }
-                    >
-                        <style>
-                            {".animate-on-click:active { animation: quick-bounce 0.2s; }
-                            @keyframes quick-bounce {
-                            0%, 100% { transform: scale(1); }
-                            50% { transform: scale(0.95); }
-                            }"}
-                        </style>
-                        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
-                            "Copy SQL"
-                        </span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
+                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
+                                "Export to Parquet"
+                            </span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+                                />
+                            </svg>
+                        </button>
+                        <button
+                            class="p-2 text-gray-500 hover:text-gray-700 relative group animate-on-click"
+                            aria-label="Copy SQL"
+                            on:click=move |_| {
+                                let window = web_sys::window().unwrap();
+                                let navigator = window.navigator();
+                                let clipboard = navigator.clipboard();
+                                let _ = clipboard.write_text(&sql);
+                            }
                         >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
-                            />
-                        </svg>
-                    </button>
-                    <button
-                        class=move || {
-                            format!(
-                                "p-2 text-gray-500 hover:text-gray-700 relative group {}",
-                                if show_plan() { "text-blue-600" } else { "" },
-                            )
-                        }
-                        aria-label="Execution plan"
-                        on:click=move |_| set_show_plan.update(|v| *v = !*v)
-                    >
-                        <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
-                            "Execution plan"
-                        </span>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
+                            <style>
+                                {".animate-on-click:active { animation: quick-bounce 0.2s; }
+                                @keyframes quick-bounce {
+                                0%, 100% { transform: scale(1); }
+                                50% { transform: scale(0.95); }
+                                }"}
+                            </style>
+                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
+                                "Copy SQL"
+                            </span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+                                />
+                            </svg>
+                        </button>
+                        <button
+                            class=move || {
+                                format!(
+                                    "p-2 text-gray-500 hover:text-gray-700 relative group {}",
+                                    if show_plan() { "text-blue-600" } else { "" },
+                                )
+                            }
+                            aria-label="Execution plan"
+                            on:click=move |_| set_show_plan.update(|v| *v = !*v)
                         >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-                            />
-                        </svg>
-                    </button>
+                            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 whitespace-nowrap pointer-events-none">
+                                "Execution plan"
+                            </span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="font-mono text-sm overflow-x-auto relative group flex-grow mb-4">
+                    <pre><code class="language-sql">{sql_clone}</code></pre>
                 </div>
             </div>