display multiple kml files on same leaflet map component

app/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@azure/msal-browser": "^4.0.1",
     "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^1.9.1",
+    "@noahspan/noahspan-components": "1.6.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
     "leaflet": "^1.9.4",

app/src/components/logbook/columns.tsx

@@ -1,26 +1,15 @@
 import {
-  CellContext,
   ColumnDef,
-  HeaderContext,
+  Icon,
+  IconButton,
+  IconName
 } from '@noahspan/noahspan-components';
 import { ILogbookEntry } from './ILogbookEntry';
 
-const columnTotal = (info: HeaderContext<ILogbookEntry, unknown>): number => {
-  const values: number[] = info.table.getFilteredRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
-  let total: number = 0;
-  
-  if (values.length > 0) {
-    total = values.reduce((accumulator, currentValue) => accumulator + currentValue, total)
-  }
-
-  return total;
-} 
-
 const pilotName: ColumnDef<ILogbookEntry> = {
   id: 'pilotName',
   accessorKey: 'pilotName',
-  header: 'Pilot',
-  footer: 'PAGE TOTALS'
+  header: 'Pilot'
 }
 const date: ColumnDef<ILogbookEntry> = {
   id: 'date',
@@ -59,9 +48,8 @@ const durationOfFlight: ColumnDef<ILogbookEntry> = {
     align: 'right',
     headerAlign: 'right'
   },
-  cell: (info: CellContext<ILogbookEntry, unknown>) =>
-    info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
-  footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
+  cell: (info: any) =>
+    info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
 }
 const notes: ColumnDef<ILogbookEntry> = {
   id: 'notes',
@@ -97,9 +85,8 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
       align: 'right',
       headerAlign: 'right'
     },
-    cell: (info: CellContext<ILogbookEntry, unknown>) =>
-      info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
-    footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
+    cell: (info: any) =>
+      info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
   },
   {
     id: 'landings',
@@ -112,7 +99,6 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'landingsDay',
         accessorKey: 'landingsDay',
         header: 'Day',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
@@ -122,7 +108,6 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'landingsNight',
         accessorKey: 'landingsNight',
         header: 'Night',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
@@ -141,31 +126,28 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'instrumentActual',
         accessorKey: 'instrumentActual',
         header: 'Actual',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'instrumentSimulated',
         accessorKey: 'instrumentSimulated',
         header: 'Simulated',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'instrumentApproaches',
         accessorKey: 'instrumentApproaches',
         header: 'Approaches',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
@@ -175,7 +157,6 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'instrumentHolds',
         accessorKey: 'instrumentHolds',
         header: 'Holds',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
@@ -185,7 +166,6 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'instrumentNavTrack',
         accessorKey: 'instrumentNavTrack',
         header: 'Nav/Track',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
@@ -204,73 +184,67 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
         id: 'groundTrainingReceived',
         accessorKey: 'groundTrainingReceived',
         header: 'Ground Training Received',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'flightTrainingReceived',
         accessorKey: 'flightTrainingReceived',
         header: 'Flight Training Received',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'crossCountry',
         accessorKey: 'crossCountry',
         header: 'Cross Country',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'night',
         accessorKey: 'night',
         header: 'Night',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'solo',
         accessorKey: 'solo',
         header: 'Solo',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       },
       {
         id: 'pilotInCommand',
         accessorKey: 'pilotInCommand',
         header: 'Pilot In Command',
-        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
           align: 'right',
           headerAlign: 'right'
         },
-        cell: (info: CellContext<ILogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
       }
     ]
   },