Merge branch 'feature/column-visibility-selection'

app/next.config.js

@@ -13,9 +13,7 @@ const nextConfig = {
   // Output a server running js file that does SSR (Server Side Rendering)
   // as opposed to 'export' that exports static HTML files.
   output: 'standalone',
-  // Disable double rendering of everything, that is more annoying
-  // than the other checks/benefits that strict mode enables.
-  reactStrictMode: false,
+  reactStrictMode: true,
 };
 
 module.exports = nextConfig;

app/package.json

@@ -38,6 +38,7 @@
     "cmdk": "^1.0.0",
     "highcharts": "^11.4.8",
     "lucide-react": "^0.452.0",
+    "moderndash": "^3.12.0",
     "next": "^14.2.15",
     "pino": "^9.4.0",
     "pino-seq": "^1.2.0",

app/src/app/search/SearchResults.tsx

@@ -7,6 +7,7 @@ import { modifySearchStateReducer } from "@/app/search/search-filter-reducer";
 import useDerivedUrlSearchParams from "@/app/search/use-derived-url-search-params";
 import { useBaseData } from "@/app/BaseDataClient";
 import { SearchContext, SearchContextState } from "@/app/search/search-context";
+import { TableColumnsProvider } from "./table-columns";
 import { SearchResult, SearchOrder, SearchPagination, SearchState, SearchAction } from "./search.d";
 import type { Tables } from "@/lib/database.types";
 import { toURLSearchParams, URLSearchParamsDict } from "@/lib/url-search-params-dict";
@@ -164,7 +165,9 @@ export function SearchResults({
 
   return (
     <SearchContext.Provider value={ctx}>
-      {children}
+      <TableColumnsProvider>
+        {children}
+      </TableColumnsProvider>
     </SearchContext.Provider>
   );
 }

app/src/app/search/components/column-selector.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Settings2 } from "lucide-react";
+import { ColumnProfile, TableColumn } from "../search.d";
+import { isEqual } from "moderndash";
+
+interface ColumnSelectorProps {
+  columns: TableColumn[];
+  onToggleColumn: (column: TableColumn) => void;
+  profiles: Record<ColumnProfile, TableColumn[]>;
+  setProfile: (profile: ColumnProfile) => void;
+}
+
+export function ColumnSelector({
+  columns,
+  onToggleColumn,
+  profiles,
+  setProfile,
+}: ColumnSelectorProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Settings2 className="h-4 w-4" />
+          <span className="sr-only">Column Settings</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={`column-selector-${column.code}${column.type === "Adaptable" ? "-" + column.stat_code : ""}`}
+            checked={column.type == "Always" ? true : column.visible}
+            onCheckedChange={() => onToggleColumn(column)}
+            disabled={column.type == "Always" ? true : false}
+          >
+            {column.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Profiles</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem
+          checked={profiles && isEqual(columns, profiles["Brief"])}
+          onCheckedChange={() => setProfile("Brief")}
+        >
+          Brief
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={profiles && isEqual(columns, profiles["Regular"])}
+          onCheckedChange={() => setProfile("Regular")}
+        >
+          Regular
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={profiles && isEqual(columns, profiles["Detailed"])}
+          onCheckedChange={() => setProfile("Detailed")}
+        >
+          Detailed
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/src/app/search/components/filter-wrapper.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useTableColumns } from "../table-columns";
+import { TableColumn } from "../search";
+
+interface FilterWrapperProps {
+  columnCode: TableColumn["code"];
+  statCode?: string | null;
+  children: React.ReactNode;
+}
+
+export function FilterWrapper({ columnCode, statCode = null, children }: FilterWrapperProps) {
+  const { visibleColumns } = useTableColumns();
+
+  // Check if this column is visible
+  const isVisible = visibleColumns.some(column => {
+    if (column.code !== columnCode) return false;
+    if (columnCode === 'statistic' && column.type === 'Adaptable') {
+      return column.stat_code === statCode;
+    }
+    return true;
+  });
+
+  if (!isVisible) return null;
+
+  return <>{children}</>;
+}

app/src/app/search/components/search-result-table-row-dropdown-menu.tsx

@@ -9,15 +9,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { Tables } from "@/lib/database.types";
+import { StatisticalUnit } from "@/app/types";
 import { MoreHorizontal, ShoppingBasket } from "lucide-react";
 
 import { useSelectionContext } from "@/app/search/use-selection-context";
 
 export default function SearchResultTableRowDropdownMenu({
   unit,
 }: {
-  readonly unit: Tables<"statistical_unit">;
+  readonly unit: StatisticalUnit;
 }) {
   const { toggle, selected } = useSelectionContext();
   const isInBasket = selected.some(

app/src/app/search/components/search-result-table.tsx

@@ -6,10 +6,12 @@ import { useSearchContext } from "@/app/search/use-search-context";
 import { cn } from "@/lib/utils";
 import { SearchResultTableBodySkeleton } from "@/app/search/components/search-result-table-body-skeleton";
 import { useRegionLevel } from "@/app/search/hooks/useRegionLevel";
+import { useTableColumns } from "../table-columns";
 
 export default function SearchResultTable() {
   const { searchResult, error, isLoading, allRegions: regions } = useSearchContext();
   const { regionLevel, setRegionLevel } = useRegionLevel();
+  const { bodyRowSuffix } = useTableColumns();
   const maxRegionLevel = Math.max(
     ...(regions?.map((region) => region.level ?? 0) ?? [])
   );
@@ -52,7 +54,7 @@ export default function SearchResultTable() {
           <TableBody>
             {searchResult?.statisticalUnits?.map((unit) => (
               <StatisticalUnitTableRow
-                key={`${unit.unit_type}-${unit.unit_id}-${unit.valid_from}`}
+                key={`sutr-${bodyRowSuffix(unit)}`}
                 unit={unit}
                 regionLevel={regionLevel}
               />