change to hoveble dot

Author: shuoweil

bigframes/display/table_widget.css

@@ -59,12 +59,20 @@
 
 .bigframes-widget th {
 	background-color: var(--colab-primary-surface-color, var(--jp-layout-color0));
-	cursor: default; /* Default cursor for non-sortable columns */
 	position: sticky;
 	top: 0;
 	z-index: 1;
 }
 
+.bigframes-widget th .sort-indicator {
+	padding-left: 4px;
+	visibility: hidden;
+}
+
+.bigframes-widget th:hover .sort-indicator {
+	visibility: visible;
+}
+
 .bigframes-widget button {
 	cursor: pointer;
 	display: inline-block;

bigframes/display/table_widget.js

@@ -144,18 +144,30 @@ function render({ model, el }) {
 		// Add click handlers to column headers for sorting
 		const headers = tableContainer.querySelectorAll("th");
 		headers.forEach((header) => {
-			const columnName = header.querySelector("div").textContent.trim();
+			const headerDiv = header.querySelector("div");
+			const columnName = headerDiv.textContent.trim();
 
 			// Only add sorting UI for sortable columns
 			if (columnName && sortableColumns.includes(columnName)) {
 				header.style.cursor = "pointer";
 
+				// Create a span for the indicator
+				const indicatorSpan = document.createElement("span");
+				indicatorSpan.classList.add("sort-indicator");
+
 				// Determine sort indicator
-				let indicator = " ●"; // Default: unsorted (dot)
+				let indicator = "●"; // Default: unsorted (dot)
 				if (currentSortColumn === columnName) {
-					indicator = currentSortAscending ? " ▲" : " ▼";
+					indicator = currentSortAscending ? "▲" : "▼";
+				}
+				indicatorSpan.textContent = indicator;
+
+				// Add indicator to the header, replacing the old one if it exists
+				const existingIndicator = header.querySelector(".sort-indicator");
+				if (existingIndicator) {
+					header.removeChild(existingIndicator);
 				}
-				header.textContent = columnName + indicator;
+				header.appendChild(indicatorSpan);
 
 				// Add click handler for three-state toggle
 				header.addEventListener(Event.CLICK, () => {

notebooks/dataframes/anywidget_mode.ipynb

@@ -45,7 +45,10 @@
    "id": "04406a4d",
    "metadata": {},
    "source": [
-    "Set the display option to use anywidget mode and partial ordering mode"
+    "This notebook demonstrates the anywidget display mode, which provides an interactive table experience.\n",
+    "Key features include:\n",
+    "- **Column Sorting:** Click on column headers to sort data in ascending, descending, or unsorted states.\n",
+    "- **Adjustable Column Widths:** Drag the dividers between column headers to resize columns."
    ]
   },
   {
@@ -154,7 +157,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "9325bb92815d4fa787c1ebda94121c84",
+       "model_id": "46e7c5b5b5c64f92b445a6a30c4a44fe",
        "version_major": 2,
        "version_minor": 1
       },
@@ -189,12 +192,21 @@
     "### 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",
-    "The sorting control cycles through three states:\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",
     "- **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."
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "adjustable-width-intro",
+   "metadata": {},
+   "source": [
+    "### Adjustable Column Widths\n",
+    "You can easily adjust the width of any column in the table. Simply hover your mouse over the vertical dividers between column headers. When the cursor changes to a resize icon, click and drag to expand or shrink the column to your desired width. This allows for better readability and customization of your table view."
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "bb15bab6",
@@ -243,7 +255,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "f0d137094cab410f8b79726ea41b9b37",
+       "model_id": "cc4b1c62308f4871be28c951737e5407",
        "version_major": 2,
        "version_minor": 1
       },
@@ -357,7 +369,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "57fc0b7ec7004891b82ea930cb15abb0",
+       "model_id": "e3fbdff6dd1641aaaf6ed0b0fc4ca372",
        "version_major": 2,
        "version_minor": 1
       },
@@ -397,7 +409,7 @@
      "data": {
       "text/html": [
        "✅ Completed. \n",
-       "    Query processed 85.9 kB in 20 seconds of slot time.\n",
+       "    Query processed 85.9 kB in 22 seconds of slot time.\n",
        "    "
       ],
       "text/plain": [
@@ -444,7 +456,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ac021154201b4b1caf43324d7baf0e44",
+       "model_id": "8d3a5c29025848779533a64dadf8edb1",
        "version_major": 2,
        "version_minor": 1
       },