making sure selected files are tracked via URL

Canadian-Geospatial-Platform · Oct 1, 2024 · 4eb58ab · 4eb58ab
1 parent 79bc153
commit 4eb58ab
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 30 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx
@@ -7,11 +7,11 @@ import { MapRenderer } from './MapRenderer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
 import { AppToolbar } from './AppToolbar';
+import { useSearchParams } from "react-router-dom";
+import { DEFAULT_CONFIG_FILE } from '@/constants';
 
 interface GeoViewMapProps {
   showConfigEditor?: boolean;
-  config: string | object;
-  configIsFilePath?: boolean;
   children?: React.ReactNode;
   top?: React.ReactNode;
   codeSnippet?: string;
@@ -21,29 +21,39 @@ interface GeoViewMapProps {
 function GeoViewMap(props: GeoViewMapProps) {
   const cgpvContext = useContext(CGPVContext);
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
 
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
 
-  const { initializeMap, isInitialized } = cgpvContext;
+  const { configFilePath, initializeMap, isInitialized } = cgpvContext;
+
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [isClosing, setIsClosing] = React.useState(false);
+
   const {
-    config,
-    configIsFilePath,
     children
   } = props;
 
-  const drawerWidth = 440;
+  const DRAWER_WIDTH = 440;
 
-  //when component is mounted, initialize the map
   useEffect(() => {
-    if (!isInitialized) {
-      initializeMap(config, configIsFilePath);
+    if(!isInitialized) {
+      const fPath = searchParams.get('config') ?? DEFAULT_CONFIG_FILE;
+      initializeMap(fPath, true);
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [isClosing, setIsClosing] = React.useState(false);
+  useEffect(() => {
+    if (configFilePath && configFilePath.length > 0) {
+      setSearchParams({ config: configFilePath });
+    } else if(isInitialized) {
+      setSearchParams({ config: ''});
+    }
+  }, [configFilePath]);
+
 
   const handleDrawerClose = () => {
     setIsClosing(true);
@@ -70,8 +80,8 @@ function GeoViewMap(props: GeoViewMapProps) {
       <AppBar
         position="fixed"
         sx={{
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          ml: { sm: `${drawerWidth}px` },
+          width: { sm: `calc(100% - ${DRAWER_WIDTH}px)` },
+          ml: { sm: `${DRAWER_WIDTH}px` },
         }}
       >
         <AppToolbar>
@@ -95,7 +105,7 @@ function GeoViewMap(props: GeoViewMapProps) {
           </IconButton>
         </AppToolbar>
       </AppBar>
-      <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="settings panel">
+      <Box component="nav" sx={{ width: { sm: DRAWER_WIDTH }, flexShrink: { sm: 0 } }} aria-label="settings panel">
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
         <Drawer
           variant="temporary"
@@ -108,7 +118,7 @@ function GeoViewMap(props: GeoViewMapProps) {
           sx={{
             bgcolor: '#f4f4f4',
             display: { xs: 'block', sm: 'none' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH },
           }}
         >
           <DrawerTabs />
@@ -117,14 +127,14 @@ function GeoViewMap(props: GeoViewMapProps) {
           variant="permanent"
           sx={{
             display: { xs: 'none', sm: 'block' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth, borderRight: '5px solid lightgray', },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH, borderRight: '5px solid lightgray', },
           }}
           open
         >
           <DrawerTabs />
         </Drawer>
       </Box>
-      <Box component="main" sx={{ flexGrow: 1, pt: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}>
+      <Box component="main" sx={{ flexGrow: 1, pt: 1, width: { sm: `calc(100% - ${DRAWER_WIDTH}px)` } }}>
         <Toolbar />
         {props.top}
         {children}

diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
@@ -18,6 +18,7 @@ import SingleSelectComplete from './SingleSelectAutoComplete';
 import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 
 
+
 export function MapBuilder() {
   const cgpvContext = useContext(CGPVContext);
 

diff --git a/src/pages/default.tsx b/src/pages/default.tsx
@@ -1,12 +1,11 @@
 
 import GeoViewMap from '../components/GeoViewMap';
-import { DEFAULT_CONFIG_FILE } from '../constants';
 import GeoViewPage from '../components/GeoViewPage';
 
 function DefaultPage() {
   return (
     <GeoViewPage>
-      <GeoViewMap config={DEFAULT_CONFIG_FILE} configIsFilePath={true} />
+      <GeoViewMap />
     </GeoViewPage>
   );
 }

diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts
@@ -201,24 +201,25 @@ export function useCgpvHook(): ICgpvHook {
       //throw new Error(`Element with id ${mapId} not found`);
     }
 
-    let configTxt = config;
+    let configTxt = '';
+    let configData = {};
     if (typeof config !== 'string' && !configIsFilePath) {
       configTxt = JSON.stringify(config);
+      configData = JSON.parse(configTxt as string);
     }
 
     if (configIsFilePath) {
       const res = await readConfigFile(config as string);
+      configData = res;
       configTxt = JSON.stringify(res)
     }
 
-    let configData = JSON.parse(configTxt as string);
     if (_.get(configData, 'mapDimensions.width') === undefined) {
       _.set(configData, 'mapDimensions.width', DEFAULT_MAP_WIDTH);
     }
     if (_.get(configData, 'mapDimensions.height') === undefined) {
       _.set(configData, 'mapDimensions.height', DEFAULT_MAP_HEIGHT);
     }
-
 
     // setting dimensions of the map
     mapElement?.setAttribute('style', `width: ${_.get(configData, 'mapDimensions.width')}; height: ${_.get(configData, 'mapDimensions.height')}`);
@@ -231,16 +232,18 @@ export function useCgpvHook(): ICgpvHook {
     }
 
     setConfigJson({ ...configData });
-    cgpv.api.createMapFromConfig(mapId, configTxt);
-    console.log('map created... initializing', configData);
-
-      setTimeout(() => { // just a delay for animation purposes
-        setIsLoading(false);
-      }, 2500);
+    if (configIsFilePath) {
+      cgpv.api.createMapFromConfig(mapId, `${URL_TO_CONFIGS}${config}`, 800); // just use file directly if its a file path
+    } else {
+      cgpv.api.createMapFromConfig(mapId, configData);
+    }
+
+    setTimeout(() => { // just a delay for animation purposes
+      setIsLoading(false);
+    }, 2500);
     cgpv.init(async () => {
-      console.log('map created... initializing');
       registerEventListeners(mapId);
-      
+
     });
   };