From 08ba9d3e335a088d27bde792bf90d90b9e83236e Mon Sep 17 00:00:00 2001
From: Andy Rae <1127507+AndyRae@users.noreply.github.com>
Date: Tue, 30 Sep 2025 18:28:28 +0100
Subject: [PATCH] Make columns optional

---
 .../fields/[fieldId]/beta/columns.tsx         | 295 +++++++++---------
 1 file changed, 152 insertions(+), 143 deletions(-)

diff --git a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/beta/columns.tsx b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/beta/columns.tsx
index 687f0be37..46f6183b6 100644
--- a/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/beta/columns.tsx
+++ b/app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/beta/columns.tsx
@@ -8,167 +8,176 @@ import CopyButton from "@/components/core/CopyButton";
 import AddConceptV3 from "@/components/concepts/AddConceptV3";
 import { AISuggestionsButton } from "@/components/recommendations/ai-suggesions-button";
 import { StoredRecommendationsButton } from "@/components/recommendations/stored-recommendations-button";
-import { enableAIRecommendation, enableStoredRecommendation } from "@/constants";
+import {
+  enableAIRecommendation,
+  enableStoredRecommendation,
+} from "@/constants";
 
 export const columns = (
   tableId: string,
   canEdit: boolean,
-  scanReportId: string
-): ColumnDef<ScanReportValueV3>[] => [
-  {
-    id: "Value",
-    accessorKey: "value",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Value" sortName="value" />
-    ),
-    enableHiding: true,
-    enableSorting: true,
-    cell: ({ row }) => {
-      const { value, id } = row.original;
+  scanReportId: string,
+): ColumnDef<ScanReportValueV3>[] => {
+  const baseColumns: ColumnDef<ScanReportValueV3>[] = [
+    {
+      id: "Value",
+      accessorKey: "value",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Value" sortName="value" />
+      ),
+      enableHiding: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        const { value, id } = row.original;
 
-      return (
-        <div className="flex items-center gap-2">
-          <a
-            className="font-bold underline underline-offset-2"
-            href={`https://athena.ohdsi.org/search-terms/terms?query=${value}`}
-            target="_blank"
-          >
-            {value}
-          </a>
-          <CopyButton textToCopy={value} />
-        </div>
-      );
-    }
-  },
-  {
-    id: "Stored Recommendations",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Stored Recommendations" />
-    ),
-    enableHiding: true,
-    enableSorting: false,
-    cell: ({ row }) => {
-      const { value, id, mapping_recommendations } = row.original;
+        return (
+          <div className="flex items-center gap-2">
+            <a
+              className="font-bold underline underline-offset-2"
+              href={`https://athena.ohdsi.org/search-terms/terms?query=${value}`}
+              target="_blank"
+            >
+              {value}
+            </a>
+            <CopyButton textToCopy={value} />
+          </div>
+        );
+      },
+    },
+    {
+      id: "Value Description",
+      accessorKey: "value_description",
+      header: ({ column }) => (
+        <DataTableColumnHeader
+          column={column}
+          title="Value Description"
+          sortName="value_description"
+        />
+      ),
+      enableHiding: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        const { value_description } = row.original;
+        return (
+          <span className="max-w-[200px] whitespace-pre-wrap text-pretty">
+            {value_description}
+          </span>
+        );
+      },
+    },
+    {
+      id: "Frequency",
+      accessorKey: "frequency",
+      header: ({ column }) => (
+        <DataTableColumnHeader
+          column={column}
+          title="Frequency"
+          sortName="frequency"
+        />
+      ),
+      enableHiding: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        const { frequency } = row.original;
+        return <span className="tabular-nums">{frequency}</span>;
+      },
+    },
+    {
+      id: "Concepts",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Concepts" />
+      ),
+      enableHiding: true,
+      enableSorting: false,
+      cell: ({ row }) => {
+        const { concepts } = row.original;
+        return (
+          <Suspense fallback={<Skeleton className="h-5 w-[250px]" />}>
+            <ConceptTagsV3
+              concepts={concepts}
+              scanReportId={scanReportId}
+              tableId={tableId}
+              fieldId={row.original.scan_report_field}
+              valueId={row.original.id}
+            />
+          </Suspense>
+        );
+      },
+    },
+    {
+      id: "Add Concept",
+      header: "",
+      cell: ({ row }) => {
+        const { id } = row.original;
 
-      return (
-        enableStoredRecommendation === "true" && (
-        <div className="flex justify-start w-full">
-          <StoredRecommendationsButton
-            value={value}
-            tableId={tableId}
+        return (
+          <AddConceptV3
             rowId={id}
+            tableId={tableId}
             contentType="scanreportvalue"
+            disabled={!canEdit}
             scanReportId={scanReportId}
             fieldId={row.original.scan_report_field}
+          />
+        );
+      },
+    },
+  ];
+
+  // Stored Recommendations Column - insert at position 1 (2nd column)
+  if (enableStoredRecommendation === "true") {
+    baseColumns.splice(1, 0, {
+      id: "Stored Recommendations",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Stored Recommendations" />
+      ),
+      enableHiding: true,
+      enableSorting: false,
+      cell: ({ row }) => {
+        const { value, id, mapping_recommendations } = row.original;
+
+        return (
+          <div className="flex justify-start w-full">
+            <StoredRecommendationsButton
+              value={value}
+              tableId={tableId}
+              rowId={id}
+              contentType="scanreportvalue"
+              scanReportId={scanReportId}
+              fieldId={row.original.scan_report_field}
               mappingRecommendations={mapping_recommendations}
             />
           </div>
-        )
-      );
-    }
-  },
-  {
-    id: "AI Suggestions",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="AI Suggestions" />
-    ),
-    enableHiding: true,
-    enableSorting: false,
-    cell: ({ row }) => {
-      const { value, id } = row.original;
+        );
+      },
+    });
+  }
 
-      return (
-        <div className="flex justify-start w-full">
-          {enableAIRecommendation === "true" ? (
+  // AI Suggestions Column - insert at position 2 (3rd column)
+  if (enableAIRecommendation === "true") {
+    baseColumns.splice(2, 0, {
+      id: "AI Suggestions",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="AI Suggestions" />
+      ),
+      enableHiding: true,
+      enableSorting: false,
+      cell: ({ row }) => {
+        const { value, id } = row.original;
+
+        return (
+          <div className="flex justify-start w-full">
             <AISuggestionsButton
               value={value}
               tableId={tableId}
               rowId={id}
               contentType="scanreportvalue"
             />
-          ) : (
-            <span className="text-gray-400 text-sm">Disabled</span>
-          )}
-        </div>
-      );
-    }
-  },
-  {
-    id: "Value Description",
-    accessorKey: "value_description",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title="Value Description"
-        sortName="value_description"
-      />
-    ),
-    enableHiding: true,
-    enableSorting: true,
-    cell: ({ row }) => {
-      const { value_description } = row.original;
-      return (
-        <span className="max-w-[200px] whitespace-pre-wrap text-pretty">
-          {value_description}
-        </span>
-      );
-    }
-  },
-  {
-    id: "Frequency",
-    accessorKey: "frequency",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title="Frequency"
-        sortName="frequency"
-      />
-    ),
-    enableHiding: true,
-    enableSorting: true,
-    cell: ({ row }) => {
-      const { frequency } = row.original;
-      return <span className="tabular-nums">{frequency}</span>;
-    }
-  },
-  {
-    id: "Concepts",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Concepts" />
-    ),
-    enableHiding: true,
-    enableSorting: false,
-    cell: ({ row }) => {
-      const { concepts } = row.original;
-      return (
-        <Suspense fallback={<Skeleton className="h-5 w-[250px]" />}>
-          <ConceptTagsV3
-            concepts={concepts}
-            scanReportId={scanReportId}
-            tableId={tableId}
-            fieldId={row.original.scan_report_field}
-            valueId={row.original.id}
-          />
-        </Suspense>
-      );
-    }
-  },
-  {
-    id: "Add Concept",
-    header: "",
-    cell: ({ row }) => {
-      const { id } = row.original;
-
-      return (
-        <AddConceptV3
-          rowId={id}
-          tableId={tableId}
-          contentType="scanreportvalue"
-          disabled={!canEdit}
-          scanReportId={scanReportId}
-          fieldId={row.original.scan_report_field}
-        />
-      );
-    }
+          </div>
+        );
+      },
+    });
   }
-];
+
+  return baseColumns;
+};