make arrow visiable after sorting

Author: shuoweil

bigframes/display/table_widget.js

@@ -154,20 +154,36 @@ function render({ model, el }) {
 				// Create a span for the indicator
 				const indicatorSpan = document.createElement("span");
 				indicatorSpan.classList.add("sort-indicator");
+				indicatorSpan.style.paddingLeft = "5px";
 
-				// Determine sort indicator
+				// Determine sort indicator and initial visibility
 				let indicator = "●"; // Default: unsorted (dot)
 				if (currentSortColumn === columnName) {
 					indicator = currentSortAscending ? "▲" : "▼";
+					indicatorSpan.style.visibility = "visible"; // Sorted arrows always visible
+				} else {
+					indicatorSpan.style.visibility = "hidden"; // Unsorted dot hidden by default
 				}
 				indicatorSpan.textContent = indicator;
 
 				// Add indicator to the header, replacing the old one if it exists
-				const existingIndicator = header.querySelector(".sort-indicator");
+				const existingIndicator = headerDiv.querySelector(".sort-indicator");
 				if (existingIndicator) {
-					header.removeChild(existingIndicator);
+					headerDiv.removeChild(existingIndicator);
 				}
-				header.appendChild(indicatorSpan);
+				headerDiv.appendChild(indicatorSpan);
+
+				// Add hover effects for unsorted columns only
+				header.addEventListener("mouseover", () => {
+					if (currentSortColumn !== columnName) {
+						indicatorSpan.style.visibility = "visible";
+					}
+				});
+				header.addEventListener("mouseout", () => {
+					if (currentSortColumn !== columnName) {
+						indicatorSpan.style.visibility = "hidden";
+					}
+				});
 
 				// Add click handler for three-state toggle
 				header.addEventListener(Event.CLICK, () => {

notebooks/dataframes/anywidget_mode.ipynb

@@ -157,7 +157,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "46e7c5b5b5c64f92b445a6a30c4a44fe",
+       "model_id": "7126a67d7aaf4b6c9055f80d358f6c15",
        "version_major": 2,
        "version_minor": 1
       },
@@ -192,8 +192,8 @@
     "### Sorting by Column\n",
     "You can sort the table by clicking on the headers of columns that have orderable data types (like numbers, strings, and dates). Non-orderable columns (like arrays or structs) do not have sorting controls.\n",
     "\n",
-    "**Sorting indicators (●, ▲, ▼) are only visible when you hover over a column header.** The sorting control cycles through three states:\n",
-    "- **Unsorted (●):** The default state. Click the header to sort in ascending order.\n",
+    "**Sorting indicators (▲, ▼) are always visible for sorted columns. The unsorted indicator (●) is only visible when you hover over an unsorted column header.** The sorting control cycles through three states:\n",
+    "- **Unsorted (no indicator by default, ● on hover):** The default state. Click the header to sort in ascending order.\n",
     "- **Ascending (▲):** The data is sorted from smallest to largest. Click again to sort in descending order.\n",
     "- **Descending (▼):** The data is sorted from largest to smallest. Click again to return to the unsorted state."
    ]
@@ -255,7 +255,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "cc4b1c62308f4871be28c951737e5407",
+       "model_id": "4f7ea9f8a4ef48539ccf72f3d36771f8",
        "version_major": 2,
        "version_minor": 1
       },
@@ -369,7 +369,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e3fbdff6dd1641aaaf6ed0b0fc4ca372",
+       "model_id": "3327e2bdfd2849ff83a0f0bffd86163b",
        "version_major": 2,
        "version_minor": 1
       },
@@ -409,7 +409,7 @@
      "data": {
       "text/html": [
        "✅ Completed. \n",
-       "    Query processed 85.9 kB in 22 seconds of slot time.\n",
+       "    Query processed 85.9 kB in 24 seconds of slot time.\n",
        "    "
       ],
       "text/plain": [
@@ -456,7 +456,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "8d3a5c29025848779533a64dadf8edb1",
+       "model_id": "be49ea39d8784bc8bd55b7755e9eb2b1",
        "version_major": 2,
        "version_minor": 1
       },