Merge pull request #1360 from kaminderpal/1288-remove-data-grid

fix(DataTable): remove data grid from footer panel Closes #1309 (#1360)

README.md

@@ -26,7 +26,7 @@ This project is now a monorepo and contains the following packages under the `pa
 
 - [geoview-layers-panel](packages/geoview-layers-panel) - a package that displays a panel with a list of loaded layers and their legend.
 
-- [geoview-footer-panel](packages/geoview-footer-panel) - a package that displays a footer panel with a list of tabs (legend, details, data grid, ...) for basic view.
+- [geoview-footer-panel](packages/geoview-footer-panel) - a package that displays a footer panel with a list of tabs (legend, details, data table, ...) for basic view.
 
 - [geoview-swiper](packages/geoview-swiper) - a package that enable a swiper control to tooggle visibility of layers from one side to the other side of the swiper bar.
 

docs/app/components-packages.md

@@ -5,10 +5,9 @@ The main difference between a component and a package is their level of customiz
 ## What is a components
 
 Components are part of the geoview-core package where we find the basic functionality of GeoView (api, events, translation, ...).
-Some components, like legends and data grids can be reused in another package or directly from the GeoView API as we can see in these demos:
+Some components, like legends and data table can be reused in another package or directly from the GeoView API as we can see in these demos:
 
 - [legend](https://canadian-geospatial-platform.github.io/geoview/public/legend.html)
-- [data-grid](https://canadian-geospatial-platform.github.io/geoview/public/package-footer-panel.html)
 
 Other components can be added to the map from the configuration via the following line:
 

packages/geoview-core/package.json

@@ -52,7 +52,6 @@
     "@mui/material": "^5.14.6",
     "@mui/styles": "^5.14.6",
     "@mui/system": "^5.14.6",
-    "@mui/x-data-grid": "^5.17.26",
     "@nieuwlandgeo/sldreader": "^0.3.1",
     "@mui/x-date-pickers": "^6.13.0",
     "ajv": "^8.12.0",
@@ -177,4 +176,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

packages/geoview-core/public/locales/en/translation.json

@@ -82,11 +82,6 @@
     "close": "Close",
     "download": "Download"
   },
-  "datagrid": {
-    "exportJson": "Download GeoJSON",
-    "filterMap": "Filter Map",
-    "stopFilterMap": "Stop Map Filter"
-  },
   "keyboardnav": {
     "start": "Skip after map element",
     "end": "Skip before map element",

packages/geoview-core/public/locales/fr/translation.json

@@ -82,11 +82,6 @@
     "close": "Fermer",
     "download": "Télécharger"
   },
-  "datagrid": {
-    "exportJson": "Télécharger GeoJSON",
-    "filterMap": "Filtrer la carte",
-    "stopFilterMap": "Filtrer la carte d'arrêt"
-  },
   "keyboardnav": {
     "start": "Aller après l'élément carte",
     "end": "Aller avant l'élément carte",

packages/geoview-core/public/templates/raw-data-table.html

@@ -59,66 +59,9 @@ <h4 id="HUC1">1. Default Configuration</h4>
     // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
     cgpv.init(function () {
       console.log('api is ready');
-      const { api, ui, createRoot } = cgpv;
-      const mapId1 = "mapWM1";
-      const mapId2 = "mapWM2";
-
       //create snippets
       createConfigSnippet();
       createCodeSnippet();
-
-      renderDataTableFromMap = async () => {
-        // import footerTabs from the core for the current map
-        const { footerTabs: ft1 } = api.maps[mapId1];
-        console.time("renderDataTableFromMap")
-        const root = createRoot(document.getElementById("dataTable"));
-
-        root.render("Data is loading...")
-
-        const layerId = Object.keys(api.maps[mapId1].layer.geoviewLayers)[2];
-        const data = await cgpv.api.maps[mapId1].dataTable.createDataPanel({ layerId, mapId: mapId1 })
-
-        // create new tab and add the LegendComponent to the footer tab
-        ft1.createFooterTab({
-          value: 3,
-          label: 'Data Table',
-          content: () => data,
-        });
-
-        root.render("")
-
-        console.timeEnd("renderDataTableFromMap")
-      };
-
-      renderFrenchDataTableFromMap = async () => {
-        // import footerTabs from the core for the current map
-        const { footerTabs: ft1 } = api.maps[mapId2];
-        console.time("renderFrDataTableFromMap")
-        const root = createRoot(document.getElementById("frDataTable"));
-
-        root.render("Les données sont en cours de chargement...")
-
-        const layerId = Object.keys(api.maps[mapId2].layer.geoviewLayers)[2];
-        const data = await cgpv.api.maps[mapId2].dataTable.createDataPanel({ layerId, mapId: mapId2 })
-
-        // create new tab and add the LegendComponent to the footer tab
-        ft1.createFooterTab({
-          value: 3,
-          label: 'Nouveau Données',
-          content: () => data,
-        });
-        root.render("")
-
-        console.timeEnd("renderFrDataTableFromMap")
-      }
-
-      cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => {
-        renderDataTableFromMap();
-      }, 'mapWM1');
-
-      cgpv.api.event.on(cgpv.api.eventNames.MAP.EVENT_MAP_LOADED, (payload) => {
-        renderFrenchDataTableFromMap();
-      }, 'mapWM2');
     });
   </script>
 </body>