handle more advanced shifting of columns

jdkent · jdkent · commit 3e42c499e12b · 2025-11-25T10:10:47.000-06:00
diff --git a/compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.tsx b/compose/neurosynth-frontend/src/pages/Annotations/components/EditAnnotationsHotTable.tsx
@@ -13,7 +13,7 @@ import { useGetWindowHeight, useUpdateAnnotationById } from 'hooks';
 import useUserCanEdit from 'hooks/useUserCanEdit';
 import { useSnackbar } from 'notistack';
 import { useProjectUser } from 'pages/Project/store/ProjectStore';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { createColumns, hotDataToAnnotationNotes, hotSettings } from './EditAnnotationsHotTable.helpers';
 
 registerAllModules();
@@ -39,6 +39,11 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         rowHeights,
     } = useEditAnnotationsHotTable(props.annotationId, !canEdit);
 
+    const manualColumnMoveOrder = useMemo(() => {
+        const totalCols = 2 + (noteKeys?.length || 0);
+        return canEdit ? Array.from({ length: totalCols }, (_v, idx) => idx) : false;
+    }, [noteKeys?.length, canEdit]);
+
     useEffect(() => {
         const timeout: any = setTimeout(() => {
             if (!hotTableRef.current?.hotInstance) return;
@@ -151,18 +156,49 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         return updated;
     };
 
-    const handleColumnMove = (movedColumns: number[], finalIndex: number) => {
+    const handleColumnMove = (
+        movedColumns: number[],
+        finalIndex: number,
+        _dropIndex?: number,
+        movePossible?: boolean,
+        orderOfColumns?: number[]
+    ) => {
         if (!canEdit) return;
         if (!movedColumns.length) return;
+        if (movePossible === false) return;
         const fromVisualIndex = movedColumns[0];
         const toVisualIndex = finalIndex;
 
         if (fromVisualIndex < 2 || toVisualIndex < 2) return; // lock study/analysis columns
 
-        const from = fromVisualIndex - 2;
-        let to = toVisualIndex - 2;
-
         setAnnotationsHotState((prev) => {
+            if (!prev.noteKeys?.length) return prev;
+
+            // If Handsontable provides the full order, use it to derive shifted positions
+            if (Array.isArray(orderOfColumns) && orderOfColumns.length >= 2) {
+                const noteOrder = orderOfColumns.filter((colIdx) => colIdx >= 2).map((colIdx) => colIdx - 2);
+                const updatedNoteKeys = noteOrder.map((nkIdx, idx) => ({
+                    ...prev.noteKeys[nkIdx],
+                    order: idx,
+                }));
+
+                const updatedHotData = prev.hotData.map((row) => {
+                    const meta = row.slice(0, 2);
+                    const noteVals = orderOfColumns.filter((colIdx) => colIdx >= 2).map((colIdx) => row[colIdx]);
+                    return [...meta, ...noteVals];
+                });
+
+                return {
+                    ...prev,
+                    isEdited: true,
+                    noteKeys: updatedNoteKeys,
+                    hotColumns: createColumns(updatedNoteKeys, !canEdit),
+                    hotData: updatedHotData,
+                };
+            }
+
+            const from = fromVisualIndex - 2;
+            let to = toVisualIndex - 2;
             if (from >= prev.noteKeys.length) return prev;
             if (to >= prev.noteKeys.length) to = prev.noteKeys.length - 1;
 
@@ -185,8 +221,13 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
                 hotData: updatedHotData,
             };
         });
+    };
 
-        // Avoid leaving drag artifacts; Handsontable plugin manages its own state
+    const handleBeforeColumnMove = (movedColumns: number[], finalIndex: number) => {
+        if (!canEdit) return true;
+        if (!movedColumns.length) return true;
+        if (movedColumns[0] < 2 || finalIndex < 2) return false; // prevent mixing with fixed cols
+        return true;
     };
 
     /**
@@ -207,6 +248,15 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
         TD: HTMLTableCellElement,
         controller: SelectionController
     ): void => {
+        if (coords.row < 0) {
+            const target = event.target as HTMLElement;
+            const isDragHandle = target?.closest('[data-drag-handle="true"]');
+            if (isDragHandle) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+        }
         const isRowHeader = coords.col === -1 || coords.col === 0;
         if (isRowHeader) {
             event.stopImmediatePropagation();
@@ -296,7 +346,8 @@ const AnnotationsHotTable: React.FC<{ annotationId?: string }> = React.memo((pro
                         mergeCells={mergeCells}
                         disableVisualSelection={!canEdit}
                         colHeaders={hotColumnHeaders}
-                        manualColumnMove={canEdit}
+                        manualColumnMove={manualColumnMoveOrder}
+                        beforeColumnMove={handleBeforeColumnMove}
                         colWidths={colWidths}
                         rowHeights={rowHeights}
                         columns={hotColumns}
diff --git a/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnnotationsHotTable.tsx b/compose/neurosynth-frontend/src/pages/Study/components/EditStudyAnnotationsHotTable.tsx
@@ -17,6 +17,7 @@ import {
     useCreateAnnotationColumn,
     useRemoveAnnotationColumn,
     useReorderAnnotationColumns,
+    useReorderAnnotationColumnsByOrder,
     useUpdateAnnotationNotes,
 } from 'stores/AnnotationStore.actions';
 
@@ -29,6 +30,7 @@ const EditStudyAnnotationsHotTable: React.FC<{ readonly?: boolean }> = ({ readon
     const createAnnotationColumn = useCreateAnnotationColumn();
     const removeAnnotationColumn = useRemoveAnnotationColumn();
     const reorderAnnotationColumns = useReorderAnnotationColumns();
+    const reorderAnnotationColumnsByOrder = useReorderAnnotationColumnsByOrder();
     const { colWidths, colHeaders, columns, hiddenRows, data } = useEditStudyAnnotationsHotTable(readonly);
     const projectUser = useProjectUser();
     const canEdit = useUserCanEdit(projectUser || undefined);
@@ -105,29 +107,63 @@ const EditStudyAnnotationsHotTable: React.FC<{ readonly?: boolean }> = ({ readon
         }
     };
 
-    const handleColumnMove = (movedColumns: number[], finalIndex: number) => {
+    const handleColumnMove = (
+        movedColumns: number[],
+        finalIndex: number,
+        _dropIndex?: number,
+        movePossible?: boolean,
+        orderOfColumns?: number[]
+    ) => {
         if (readonly || !canEdit) return;
         if (!movedColumns.length) return;
+        if (movePossible === false) return;
 
         const fromVisualIndex = movedColumns[0];
         const toVisualIndex = finalIndex;
 
         // first two columns are static (analysis name/description)
         if (fromVisualIndex < 2 || toVisualIndex < 2) return;
 
-        const from = fromVisualIndex - 2;
-        let to = toVisualIndex - 2;
-
         if (!noteKeys) return;
-        if (to >= noteKeys.length) to = noteKeys.length - 1;
+        if (Array.isArray(orderOfColumns) && orderOfColumns.length >= 2) {
+            const noteOrder = orderOfColumns.filter((colIdx) => colIdx >= 2).map((colIdx) => colIdx - 2);
+            if (!noteOrder.length) return;
+            reorderAnnotationColumnsByOrder(noteOrder);
+        } else {
+            const from = fromVisualIndex - 2;
+            let to = toVisualIndex - 2;
+            if (to >= noteKeys.length) to = noteKeys.length - 1;
+            reorderAnnotationColumns(from, to);
+        }
+    };
 
-        reorderAnnotationColumns(from, to);
+    const handleBeforeColumnMove = (movedColumns: number[], finalIndex: number) => {
+        if (readonly || !canEdit) return true;
+        if (!movedColumns.length) return true;
+        if (movedColumns[0] < 2 || finalIndex < 2) return false;
+        return true;
     };
 
     const memoizedData = useMemo(() => {
         return JSON.parse(JSON.stringify(data || []));
     }, [data]);
 
+    const handleBeforeOnCellMouseDown = (
+        event: MouseEvent,
+        coords: CellCoords,
+        TD: HTMLTableCellElement
+    ) => {
+        if (coords.row < 0) {
+            const target = event.target as HTMLElement;
+            const isDragHandle = target?.closest('[data-drag-handle="true"]');
+            if (isDragHandle) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+        }
+    };
+
     return (
         <Box>
             {canEdit && !readonly && (
@@ -173,8 +209,10 @@ const EditStudyAnnotationsHotTable: React.FC<{ readonly?: boolean }> = ({ readon
                         rows: hiddenRows,
                         indicators: false,
                     }}
+                    beforeOnCellMouseDown={handleBeforeOnCellMouseDown}
                     afterOnCellMouseUp={handleCellMouseUp}
-                    manualColumnMove={!readonly && canEdit}
+                    manualColumnMove={!readonly && canEdit ? Array.from({ length: 2 + (noteKeys?.length || 0) }, (_v, idx) => idx) : false}
+                    beforeColumnMove={handleBeforeColumnMove}
                     afterColumnMove={handleColumnMove}
                     colWidths={colWidths}
                     columns={columns}
diff --git a/compose/neurosynth-frontend/src/stores/AnnotationStore.actions.ts b/compose/neurosynth-frontend/src/stores/AnnotationStore.actions.ts
@@ -21,3 +21,5 @@ export const useCreateAnnotationNote = () => useAnnotationStore((state) => state
 export const useDeleteAnnotationNote = () => useAnnotationStore((state) => state.deleteAnnotationNote);
 export const useUpdateAnnotationNoteName = () => useAnnotationStore((state) => state.updateAnnotationNoteName);
 export const useReorderAnnotationColumns = () => useAnnotationStore((state) => state.reorderAnnotationColumns);
+export const useReorderAnnotationColumnsByOrder = () =>
+    useAnnotationStore((state) => state.reorderAnnotationColumnsByOrder);
diff --git a/compose/neurosynth-frontend/src/stores/AnnotationStore.ts b/compose/neurosynth-frontend/src/stores/AnnotationStore.ts
@@ -240,6 +240,30 @@ export const useAnnotationStore = create<
                 };
             });
         },
+        reorderAnnotationColumnsByOrder: (order) => {
+            setUnloadHandler('annotation');
+            set((state) => {
+                if (!state.annotation.note_keys || !order.length) return state;
+                const ordered = order
+                    .map((idx) => state.annotation.note_keys?.[idx])
+                    .filter((x): x is NoteKeyType => !!x)
+                    .map((noteKey, idx) => ({ ...noteKey, order: idx }));
+
+                if (!ordered.length) return state;
+
+                return {
+                    ...state,
+                    annotation: {
+                        ...state.annotation,
+                        note_keys: ordered,
+                    },
+                    storeMetadata: {
+                        ...state.storeMetadata,
+                        annotationIsEdited: true,
+                    },
+                };
+            });
+        },
         createAnnotationNote: (analysisId, studyId, analysisName) => {
             setUnloadHandler('annotation');
             set((state) => {
diff --git a/compose/neurosynth-frontend/src/stores/AnnotationStore.types.ts b/compose/neurosynth-frontend/src/stores/AnnotationStore.types.ts
@@ -29,6 +29,7 @@ export type AnnotationStoreActions = {
     updateAnnotationNoteName: (analysis: Partial<IStoreNoteCollectionReturn>) => void;
     removeAnnotationColumn: (noteKey: string) => void;
     reorderAnnotationColumns: (fromIndex: number, toIndex: number) => void;
+    reorderAnnotationColumnsByOrder: (order: number[]) => void;
 };
 
 export type AnnotationNoteType = {
