fix: added add metadata row feature in study annotations (#1197)

* fix: added add metadata row feature in study annotations

* feat: add edit study annotation numeric and column deletion support

* add annotation table re-ordering logic and tests

* syncronize package.json

---------

Co-authored-by: James Kent <[email protected]>

Author: nicoalee

compose/neurosynth-frontend/cypress/fixtures/ImportSleuth/neurosynthResponses/annotationsSingleSleuthStudyResponse.json

@@ -25,10 +25,16 @@
     "source_id": null,
     "source_updated_at": null,
     "note_keys": {
-        "included": "boolean",
-        "test1_new_txt": "boolean"
+        "included": {
+            "type": "boolean",
+            "order": 0
+        },
+        "test1_new_txt": {
+            "type": "boolean",
+            "order": 1
+        }
     },
     "metadata": null,
     "name": "Annotation for Untitled sleuth project",
     "description": ""
-}
+}

compose/neurosynth-frontend/cypress/fixtures/IngestionFixtures/annotationsFixture.json

@@ -10,7 +10,10 @@
     "source_id": null,
     "source_updated_at": null,
     "note_keys": {
-        "included": "boolean"
+        "included": {
+            "type": "boolean",
+            "order": 0
+        }
     },
     "metadata": null,
     "name": "Annotation for studyset hQFjozWL9v8Q",

compose/neurosynth-frontend/cypress/fixtures/IngestionFixtures/annotationsPutFixture.json

@@ -10,7 +10,10 @@
     "source_id": null,
     "source_updated_at": null,
     "note_keys": {
-        "included": "boolean"
+        "included": {
+            "type": "boolean",
+            "order": 0
+        }
     },
     "metadata": null,
     "name": "Annotation for studyset hQFjozWL9v8Q",

compose/neurosynth-frontend/cypress/fixtures/annotation.json

@@ -5,8 +5,14 @@
     "metadata": null,
     "name": "Annotation for studyset 73HRs8HaJbR8",
     "note_keys": {
-      "included": "boolean",
-      "string_key": "string"
+      "included": {
+        "type": "boolean",
+        "order": 0
+      },
+      "string_key": {
+        "type": "string",
+        "order": 1
+      }
     },
     "notes": [
       {
@@ -44,4 +50,4 @@
     "user": "github|26612023",
     "username": "Nicholas Lee"
   }
-  
+  

compose/neurosynth-frontend/package-lock.json

@@ -102,7 +102,7 @@
         "prettier": "^3.3.3",
         "react-error-overlay": "^6.0.9",
         "ts-node": "^10.9.2",
-        "typescript": "^4.9.5",
+        "typescript": "^5.9.3",
         "typescript-eslint": "^8.13.0",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^3.0.7"

compose/neurosynth-frontend/package.json

@@ -3,6 +3,7 @@ import { EPropertyType } from 'components/EditMetadata/EditMetadata.types';
 export interface NoteKeyType {
     key: string;
     type: EPropertyType;
+    order: number;
 }
 
 export type AnnotationNoteValue = string | number | boolean | null;

compose/neurosynth-frontend/src/components/HotTables/HotTables.types.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { EPropertyType } from 'components/EditMetadata/EditMetadata.types';
+import { noteKeyArrToObj, noteKeyObjToArr } from './HotTables.utils';
+
+describe('HotTables utils - note key conversions', () => {
+    it('converts note_keys object descriptors to a sorted array and reindexes order', () => {
+        const input = {
+            beta: { type: EPropertyType.STRING, order: 5 },
+            alpha: { type: EPropertyType.NUMBER, order: 1 },
+            gamma: { type: EPropertyType.BOOLEAN, order: 1 },
+        };
+
+        const result = noteKeyObjToArr(input);
+
+        expect(result).toEqual([
+            { key: 'alpha', type: EPropertyType.NUMBER, order: 0 },
+            { key: 'gamma', type: EPropertyType.BOOLEAN, order: 1 },
+            { key: 'beta', type: EPropertyType.STRING, order: 2 },
+        ]);
+    });
+
+    it('throws if a note_key descriptor is missing a type', () => {
+        const invalid = {
+            alpha: { order: 0 },
+        } as any;
+
+        expect(() => noteKeyObjToArr(invalid)).toThrow(/missing type/i);
+    });
+
+    it('converts a note key array back to descriptor object preserving order', () => {
+        const arr = [
+            { key: 'first', type: EPropertyType.STRING, order: 2 },
+            { key: 'second', type: EPropertyType.BOOLEAN, order: 0 },
+            { key: 'third', type: EPropertyType.NUMBER, order: undefined as unknown as number },
+        ];
+
+        const result = noteKeyArrToObj(arr);
+
+        expect(result).toEqual({
+            first: { type: EPropertyType.STRING, order: 2 },
+            second: { type: EPropertyType.BOOLEAN, order: 0 },
+            third: { type: EPropertyType.NUMBER, order: 2 },
+        });
+    });
+});

compose/neurosynth-frontend/src/components/HotTables/HotTables.utils.spec.ts

@@ -4,19 +4,32 @@ import { CellValue } from 'handsontable/common';
 
 export const noteKeyObjToArr = (noteKeys?: object | null): NoteKeyType[] => {
     if (!noteKeys) return [];
-    const noteKeyTypes = noteKeys as { [key: string]: EPropertyType };
-    const arr = Object.entries(noteKeyTypes).map(([key, type]) => ({
-        key,
-        type,
-    }));
+    const noteKeyTypes = noteKeys as { [key: string]: { type: EPropertyType; order?: number } };
+    const arr = Object.entries(noteKeyTypes)
+        .map(([key, descriptor]) => {
+            if (!descriptor?.type) throw new Error('Invalid note_keys descriptor: missing type');
+            return {
+                // rely on new descriptor shape (type + order)
+                type: descriptor.type,
+                key,
+                order: descriptor.order ?? 0,
+            };
+        })
+        .sort((a, b) => a.order - b.order || a.key.localeCompare(b.key))
+        .map((noteKey, index) => ({ ...noteKey, order: index }));
     return arr;
 };
 
-export const noteKeyArrToObj = (noteKeyArr: NoteKeyType[]): { [key: string]: EPropertyType } => {
-    const noteKeyObj: { [key: string]: EPropertyType } = noteKeyArr.reduce((acc, curr) => {
-        acc[curr.key] = curr.type;
+export const noteKeyArrToObj = (
+    noteKeyArr: NoteKeyType[]
+): { [key: string]: { type: EPropertyType; order: number } } => {
+    const noteKeyObj = noteKeyArr.reduce((acc, curr, index) => {
+        acc[curr.key] = {
+            type: curr.type,
+            order: curr.order ?? index,
+        };
         return acc;
-    }, {} as { [key: string]: EPropertyType });
+    }, {} as { [key: string]: { type: EPropertyType; order: number } });
 
     return noteKeyObj;
 };

compose/neurosynth-frontend/src/components/HotTables/HotTables.utils.tsx

@@ -119,11 +119,7 @@ export const annotationNotesToHotData = (
     };
 };
 
-export const createColumnHeader = (
-    colKey: string,
-    colType: EPropertyType,
-    allowRemoveColumn: boolean
-) => {
+export const createColumnHeader = (colKey: string, colType: EPropertyType, allowRemoveColumn: boolean) => {
     const allowRemove = allowRemoveColumn
         ? `<div style="width: 50px; display: flex; align-items: center; justify-content: center">
         ${renderToString(
@@ -141,7 +137,7 @@ export const createColumnHeader = (
 
     return (
         `<div title="${colKey}" style="display: flex; align-items: center; justify-content: center;">` +
-        `<div class="${styles[colType]} ${styles.truncate}" style="width: 150px">${colKey}</div>` +
+        `<div class="${styles[colType]} ${styles.truncate}" style="width: 100px">${colKey}</div>` +
         allowRemove +
         `</div>`
     );
@@ -168,17 +164,15 @@ export const createColumns = (noteKeys: NoteKeyType[], disable?: boolean) =>
                     x.type === EPropertyType.NUMBER
                         ? numericValidator
                         : x.type === EPropertyType.BOOLEAN
-                        ? booleanValidator
-                        : undefined,
+                          ? booleanValidator
+                          : undefined,
             } as ColumnSettings;
         }),
     ] as ColumnSettings[];
 
 // we can assume that the hashmap maintains order and is sorted by key
 // this function gets all merge cells and only merge cells. If a cell does not need to be merged, a mergeCellObj is not creatd
-export const getMergeCells = (
-    hotDataToStudyMapping: Map<number, { studyId: string; analysisId: string }>
-) => {
+export const getMergeCells = (hotDataToStudyMapping: Map<number, { studyId: string; analysisId: string }>) => {
     const mergeCells: MergeCellsSettings[] = [];
 
     let studyId: string;