add explicit drag button

Author: jdkent

compose/neurosynth-frontend/src/components/HotTables/HotTables.module.css

@@ -44,3 +44,14 @@
     color: gray !important;
     text-align: center !important;
 }
+
+.drag-handle {
+    cursor: grab;
+    user-select: none;
+    font-size: 16px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 4px;
+}

compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.helpers.tsx

@@ -119,9 +119,18 @@ export const annotationNotesToHotData = (
     };
 };
 
-export const createColumnHeader = (colKey: string, colType: EPropertyType, allowRemoveColumn: boolean) => {
+export const createColumnHeader = (
+    colKey: string,
+    colType: EPropertyType,
+    allowRemoveColumn: boolean,
+    showDragHandle = false
+) => {
+    const dragHandle = showDragHandle
+        ? `<div data-drag-handle="true" class="${styles['drag-handle']}" title="Drag to reorder">&#8942;</div>`
+        : '<div style="width: 12px;"></div>';
+
     const allowRemove = allowRemoveColumn
-        ? `<div style="width: 50px; display: flex; align-items: center; justify-content: center">
+        ? `<div data-remove-col="true" style="width: 50px; display: flex; align-items: center; justify-content: center">
         ${renderToString(
             <Cancel
                 sx={{
@@ -133,10 +142,11 @@ export const createColumnHeader = (colKey: string, colType: EPropertyType, allow
             />
         )}
           </div>`
-        : '<div></div>';
+        : '<div style="width: 50px;"></div>';
 
     return (
-        `<div title="${colKey}" style="display: flex; align-items: center; justify-content: center;">` +
+        `<div data-col-key="${colKey}" title="${colKey}" style="display: flex; align-items: center; justify-content: center; gap: 6px;">` +
+        dragHandle +
         `<div class="${styles[colType]} ${styles.truncate}" style="width: 100px">${colKey}</div>` +
         allowRemove +
         `</div>`

compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.tsx

@@ -134,8 +134,12 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
 
     const handleCellMouseUp = (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement): void => {
         const target = event.target as HTMLButtonElement;
-        if (coords.row < 0 && (target.tagName === 'svg' || target.tagName === 'path')) {
-            handleRemoveHotColumn(TD.innerText);
+        if (coords.row < 0) {
+            const removeTarget = (target as HTMLElement).closest('[data-remove-col="true"]');
+            if (removeTarget) {
+                const colKey = (target as HTMLElement).closest('[data-col-key]')?.getAttribute('data-col-key');
+                if (colKey) handleRemoveHotColumn(colKey);
+            }
         }
     };
 

compose/neurosynth-frontend/src/pages/Annotations/hooks/useEditAnnotationsHotTable.tsx

@@ -77,10 +77,10 @@ const useEditAnnotationsHotTable = (annotationId?: string, disableEdit?: boolean
             ...['Study', 'Analysis'],
             ...annotationsHotState.noteKeys.map((col) => {
                 const allowRemoveColumn = col.key !== 'included';
-                return createColumnHeader(col.key, col.type, allowRemoveColumn);
+                return createColumnHeader(col.key, col.type, allowRemoveColumn, !disableEdit);
             }),
         ];
-    }, [annotationsHotState.noteKeys]);
+    }, [annotationsHotState.noteKeys, disableEdit]);
 
     const colWidths = useMemo(() => {
         return createColWidths(annotationsHotState.noteKeys, 300, 150, 150);

compose/neurosynth-frontend/src/pages/Study/hooks/useEditStudyAnnotationsHotTable.tsx

@@ -58,7 +58,7 @@ const useEditStudyAnnotationsHotTable = (readonly?: boolean) => {
             colHeaders: [
                 'Analysis Name',
                 'Analysis Description',
-                ...(noteKeys ?? []).map((x) => createColumnHeader(x.key, x.type, true)),
+                ...(noteKeys ?? []).map((x) => createColumnHeader(x.key, x.type, true, false)),
             ],
             colWidths: createColWidths(noteKeys || [], 150, 150, 150),
         };