[components,map,excel][l]: fix leaflet map markers on prod and implement excel component

package-lock.json

@@ -13820,6 +13820,25 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "30.0.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz",
+      "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==",
+      "peer": true
+    },
+    "node_modules/ag-grid-react": {
+      "version": "30.0.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz",
+      "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "ag-grid-community": "~30.0.3",
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -16660,6 +16679,11 @@
       "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==",
       "dev": true
     },
+    "node_modules/cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
+    },
     "node_modules/cypress": {
       "version": "12.9.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz",
@@ -28285,7 +28309,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -32213,6 +32236,34 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-url": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
+      "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==",
+      "dependencies": {
+        "make-dir": "~3.1.0",
+        "mime": "~2.5.2",
+        "minimatch": "~3.0.4",
+        "xxhashjs": "~0.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-url/node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -32842,18 +32893,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/react-data-grid": {
-      "version": "7.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-beta.34.tgz",
-      "integrity": "sha512-OwOP77vabb47xhbvHCXJ2QwFHsfduoLJhgXncGe0gIjrrwJ9xr2SdfEe/U6KAfHnLuBDxCDoY0SOgfJiOQtd+Q==",
-      "dependencies": {
-        "clsx": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^18.0",
-        "react-dom": "^18.0"
-      }
-    },
     "node_modules/react-docgen": {
       "version": "6.0.0-alpha.3",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-6.0.0-alpha.3.tgz",
@@ -34411,7 +34450,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -39197,6 +39235,14 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xxhashjs": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
+      "dependencies": {
+        "cuint": "^0.2.2"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -39747,14 +39793,15 @@
         "@heroicons/react": "^2.0.17",
         "@planet/maps": "^8.1.0",
         "@tanstack/react-table": "^8.8.5",
+        "ag-grid-react": "^30.0.4",
         "chroma-js": "^2.4.2",
         "flexsearch": "0.7.21",
         "leaflet": "^1.9.4",
         "next-mdx-remote": "^4.4.1",
         "ol": "^7.4.0",
         "papaparse": "^5.4.1",
+        "postcss-url": "^10.1.3",
         "react": "^18.2.0",
-        "react-data-grid": "^7.0.0-beta.34",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
         "react-leaflet": "^4.2.1",
@@ -46975,6 +47022,7 @@
         "@typescript-eslint/parser": "^5.57.1",
         "@vitejs/plugin-react": "^4.0.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
+        "ag-grid-react": "^30.0.4",
         "autoprefixer": "^10.4.14",
         "chroma-js": "^2.4.2",
         "eslint": "^8.38.0",
@@ -46990,9 +47038,9 @@
         "postcss": "^8.4.23",
         "postcss-import": "^15.1.0",
         "postcss-import-url": "^7.2.0",
+        "postcss-url": "*",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
-        "react-data-grid": "*",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
         "react-leaflet": "^4.2.1",
@@ -51044,6 +51092,20 @@
       "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
       "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
     },
+    "ag-grid-community": {
+      "version": "30.0.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz",
+      "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==",
+      "peer": true
+    },
+    "ag-grid-react": {
+      "version": "30.0.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz",
+      "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -53199,6 +53261,11 @@
       "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==",
       "dev": true
     },
+    "cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
+    },
     "cypress": {
       "version": "12.9.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz",
@@ -62112,7 +62179,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
       "requires": {
         "semver": "^6.0.0"
       }
@@ -64853,6 +64919,24 @@
         "postcss-selector-parser": "^6.0.5"
       }
     },
+    "postcss-url": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
+      "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==",
+      "requires": {
+        "make-dir": "~3.1.0",
+        "mime": "~2.5.2",
+        "minimatch": "~3.0.4",
+        "xxhashjs": "~0.2.2"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+          "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
+        }
+      }
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -65326,14 +65410,6 @@
       "dev": true,
       "requires": {}
     },
-    "react-data-grid": {
-      "version": "7.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-beta.34.tgz",
-      "integrity": "sha512-OwOP77vabb47xhbvHCXJ2QwFHsfduoLJhgXncGe0gIjrrwJ9xr2SdfEe/U6KAfHnLuBDxCDoY0SOgfJiOQtd+Q==",
-      "requires": {
-        "clsx": "^1.1.1"
-      }
-    },
     "react-docgen": {
       "version": "6.0.0-alpha.3",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-6.0.0-alpha.3.tgz",
@@ -66493,8 +66569,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-      "dev": true
     },
     "send": {
       "version": "0.18.0",
@@ -70147,6 +70222,14 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
+    "xxhashjs": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
+      "requires": {
+        "cuint": "^0.2.2"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

packages/components/.storybook/preview-head.html

@@ -1,10 +0,0 @@
-<!--
-  This is necessary for Leaflet maps to work.
--->
-
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-  crossorigin=""
-/>

packages/components/package.json

@@ -17,7 +17,7 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
+    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/style.css --minify",
     "prepare": "npm run build",
     "fix-leaflet": "node ./scripts/fix-leaflet.cjs"
   },
@@ -30,14 +30,15 @@
     "@heroicons/react": "^2.0.17",
     "@planet/maps": "^8.1.0",
     "@tanstack/react-table": "^8.8.5",
+    "ag-grid-react": "^30.0.4",
     "chroma-js": "^2.4.2",
     "flexsearch": "0.7.21",
     "leaflet": "^1.9.4",
     "next-mdx-remote": "^4.4.1",
     "ol": "^7.4.0",
     "papaparse": "^5.4.1",
+    "postcss-url": "^10.1.3",
     "react": "^18.2.0",
-    "react-data-grid": "^7.0.0-beta.34",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-leaflet": "^4.2.1",
@@ -95,7 +96,7 @@
       "require": "./dist/components.umd.js"
     },
     "./styles.css": {
-      "import": "./dist/styles.css"
+      "import": "./dist/style.css"
     }
   },
   "publishConfig": {

packages/components/postcss.config.js

@@ -1,8 +1,9 @@
-console.log('PostCSS')
+console.log('PostCSS');
 
 export default {
   plugins: {
     'postcss-import': {},
+    'postcss-url': { url: 'inline' },
     tailwindcss: {},
     autoprefixer: {},
   },

packages/components/src/components/Excel.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import { read, utils } from 'xlsx';
-import DataGrid, { Column, textEditor } from 'react-data-grid';
+import { AgGridReact } from 'ag-grid-react';
-import 'react-data-grid/lib/styles.css';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 
 export type ExcelProps = {
   url: string;
@@ -16,17 +17,23 @@ export function Excel({ url }: ExcelProps) {
   const [cols, setCols] = useState<any>();
 
   const loadSpreadsheet = (wb: any, name: string) => {
-    console.log(name)
     setActiveSheetName(name);
     const ws = wb.Sheets[name];
-    const rows = utils.sheet_to_json(ws, { header: 1 });
 
     const range = utils.decode_range(ws['!ref'] || 'A1');
     const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
-      key: String(i),
+      field: utils.encode_col(i),
-      name: utils.encode_col(i),
-      editor: textEditor,
     }));
+
+    const rowsAr = utils.sheet_to_json(ws, { header: 1 });
+    const rows = rowsAr.map((row) => {
+      const obj = {};
+      columns.forEach((col, i) => {
+        obj[col.field] = row[i];
+      });
+      return obj;
+    });
+
     setRows(rows);
     setCols(columns);
   };
@@ -52,18 +59,36 @@ export function Excel({ url }: ExcelProps) {
     <>
       {cols && rows && (
         <div>
-          <DataGrid columns={cols} rows={rows} onRowsChange={setRows} />
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 400, width: '100%' }}
+          >
+            <AgGridReact
+              rowData={rows}
+              columnDefs={cols}
+              defaultColDef={{
+                resizable: true,
+                minWidth: 200,
+                flex: 1,
+                sortable: true,
+                filter: true,
+              }}
+            ></AgGridReact>
+          </div>
           <div className="border-t">
             {workbook.SheetNames.map((name: string, idx: number) => {
               return (
-                <button
+                <>
-                  className={`px-3 pb-1 pt-2 border-b border-l border-r ${
+                  <button
-                    name == activeSheetName ? 'font-bold' : ''
+                    key={idx}
-                  }`}
+                    className={`text-sm px-3 pb-2 pt-4 border-b border-l border-r ${
-                  onClick={() => loadSpreadsheet(workbook, name)}
+                      name == activeSheetName ? 'font-semibold' : ''
-                >
+                    }`}
-                  {name}
+                    onClick={() => loadSpreadsheet(workbook, name)}
-                </button>
+                  >
+                    {name}
+                  </button>
+                </>
               );
             })}
           </div>

packages/components/src/components/Map.tsx

@@ -6,9 +6,10 @@ import {
   MapContainer,
   TileLayer,
   GeoJSON as GeoJSONLayer,
-  LayersControl
+  LayersControl,
 } from 'react-leaflet';
 
+import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';
 
 export type MapProps = {
@@ -131,6 +132,27 @@ export function Map({
               <LayersControl.Overlay key={layer.name} checked name={layer.name}>
                 <GeoJSONLayer
                   data={data}
+                  //  @ts-ignore
+                  pointToLayer={(feature, latlng) => {
+                    //  This resolver an issue in which the bundled map was
+                    //  not finding the images
+                    const leafletBase =
+                      'https://unpkg.com/leaflet@1.9.4/dist/images/';
+
+                    const icon = new L.Icon({
+                      iconUrl: leafletBase + 'marker-icon.png',
+                      iconRetinaUrl: leafletBase + 'marker-icon-2x.png',
+                      shadowUrl: leafletBase + 'marker-shadow.png',
+                      iconSize: [25, 41],
+                      iconAnchor: [12, 41],
+                      popupAnchor: [1, -34],
+                      tooltipAnchor: [16, -28],
+                      shadowSize: [41, 41],
+                    });
+
+                    const iconMarker = L.marker(latlng, { icon });
+                    return iconMarker;
+                  }}
                   style={(geoJsonFeature: any) => {
                     //  Set the fill color of each feature when appliable
                     if (

packages/components/src/index.css

@@ -1,7 +1,9 @@
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "leaflet";
 @import "include";
+@import "leaflet";
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-alpine.css';
 @import "tailwindcss/utilities";
 

packages/components/src/index.ts

@@ -6,3 +6,4 @@ export * from "./components/VegaLite";
 export * from "./components/FlatUiTable";
 export * from './components/OpenLayers/OpenLayers';
 export * from "./components/Map";
+export * from "./components/Excel";

packages/components/stories/Excel.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta = {
   argTypes: {
     url: {
       description:
-        'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"',
+        'Url of the file to be displayed e.g.: "https://url.to/data.csv"',
     },
   },
 };
@@ -19,9 +19,16 @@ export default meta;
 
 type Story = StoryObj<ExcelProps>;
 
-export const FromURL: Story = {
+export const SingleSheet: Story = {
-  name: 'Excel spreadsheet from URL',
+  name: 'Excel file with just one sheet',
   args: {
     url: 'https://sheetjs.com/pres.xlsx',
   },
 };
+
+export const MultipleSheet: Story = {
+  name: 'Excel file with multiple sheets',
+  args: {
+    url: 'https://www.smartsheet.com/sites/default/files/IC-Gantt-Chart-Project-Template-8857.xlsx',
+  },
+};