Feature/share - Creating a screenshot

package.json

@@ -64,6 +64,7 @@
     "d3": "^7.8.5",
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.5",
+    "html-to-image": "^1.11.11",
     "leaflet": "^1.9.4",
     "mapbox-gl": "^3.1.2",
     "prop-types": "^15.8.1",
@@ -73,6 +74,7 @@
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^7.1.7",
     "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
     "react-timeago": "^7.2.0",
     "recharts": "^2.12.6"
   },

src/app.js

@@ -1,30 +1,57 @@
 import React, { Fragment } from 'react';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Map } from '@components/map';
 import { ObservationDialog } from "@components/dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 import { ControlPanel } from '@components/control-panel';
 import { MapLegend } from '@components/legend';
+import { Share } from '@share/share';
 
-export const App = () => {
+/**
+ * renders the main content
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Content = () => {
     // install the selected observation list from the layer context
-    const {
-        selectedObservations
-    } = useLayers();
+    const { selectedObservations } = useLayers();
 
+    // render all the application content
     return (
         <Fragment>
-        {
-            // for each observation selected
-            selectedObservations.map (function (obs) {
-                // render the observation
-                return <ObservationDialog key={obs["station_name"]} obs={obs} />;
-            })
-        }
+            {
+                // for each observation selected
+                selectedObservations.map (function (obs) {
+                    // render the observation
+                    return <ObservationDialog key={obs["station_name"]} obs={obs} />;
+                })
+            }
             <Map />
             <Sidebar />
             <ControlPanel/>
             <MapLegend />
+            <Share />
+        </Fragment>
+    );
+};
+
+/**
+ * renders the application
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const App = () => {
+    // render the application
+    return (
+        <Fragment>
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={ <Content/> } />
+               </Routes>
+            </BrowserRouter>
         </Fragment>
     );
 };

src/components/control-panel/control-panel.js

@@ -277,7 +277,7 @@ export const ControlPanel = () => {
         '&:hover': { filter: 'opacity(1.0)' },
         height: 'auto',
         width: '300px',
-        zIndex: 999,
+        zIndex: 401,
         borderRadius: 'sm',
       }}
     >

src/components/dialog/base-floating-dialog.js

@@ -63,13 +63,18 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     disableEnforceFocus
                     style={{ pointerEvents: 'none' }}
                     PaperProps={{ sx: { width: 750,  height: 485, pointerEvents: 'auto'} }}
-                    sx={{ width: 750, height: 485, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                    sx={{ zIndex: 402, width: 750, height: 485, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
                 >
-                    <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center', fontSize: 14, height: 35, m: 0, p: 1 }} id="draggable-dialog-title"> { title } </DialogTitle>
+                    <DialogTitle
+                        sx={{cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center',
+                            fontSize: 14, height: 35, m: 0, p: 1 }} id="draggable-dialog-title"> { title } </DialogTitle>
 
-                    <DialogContent sx={{backgroundColor: 'white', fontSize: 14, m: 0, width: 590, height: 350 }}>{ dialogObject }</DialogContent>
+                    <DialogContent
+                        sx={{backgroundColor: 'white', fontSize: 14, m: 0, width: 590, height: 350 }}>{ dialogObject }</DialogContent>
 
-                    <DialogActions sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}><Button style={{fontSize: 14}} autoFocus onClick={ handleClose }> Close </Button></DialogActions>
+                    <DialogActions
+                        sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}>
+                        <Button style={{fontSize: 14}} autoFocus onClick={ handleClose }> Close </Button></DialogActions>
                 </Dialog>
         </Fragment>
     );

src/components/legend/legend.js

@@ -64,7 +64,7 @@ export const MapLegend = () => {
             height: 'auto',
             width: '100px',
             padding: '10px',
-            zIndex: 999,
+            zIndex: 401,
             borderRadius: 'sm',
             visibility: legendVisibilty,
         }}         

src/components/map/default-layers.js

@@ -5,6 +5,7 @@ import { useLayers } from '@context';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { markClicked } from '@utils/map-utils';
+import { useLocation } from "react-router-dom";
 
 const newLayerDefaultState = (layer) => {
     const { product_type } = layer.properties;
@@ -23,10 +24,19 @@ const newLayerDefaultState = (layer) => {
   };
 
 export const DefaultLayers = () => {
-
     const [obsData, setObsData] = useState("");
     const map = useMap();
 
+    // get the hash location (if any)
+    const { hash } = useLocation();
+
+    let share_run = '';
+
+    if (hash !== '') {
+        share_run = '&run_id=' + hash.split('=')[1];
+        share_run = share_run.split(',')[0];
+    }
+
     const {
         defaultModelLayers,
         setDefaultModelLayers,
@@ -88,7 +98,7 @@ export const DefaultLayers = () => {
     };
 
     // create the URLs to the data endpoints
-    const data_url = `${process.env.REACT_APP_UI_DATA_URL}get_ui_data_secure?limit=1&use_new_wb=true&use_v3_sp=true`;
+    const data_url = `${process.env.REACT_APP_UI_DATA_URL}get_ui_data_secure?limit=1&use_new_wb=true&use_v3_sp=true` + share_run;
     const gs_wms_url = `${process.env.REACT_APP_GS_DATA_URL}wms`;
     const gs_wfs_url = `${process.env.REACT_APP_GS_DATA_URL}`;
 

src/components/share/buildlink.js

@@ -0,0 +1,64 @@
+import React, { Fragment } from 'react';
+import { IconButton } from '@mui/joy';
+import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
+import {useLayers} from "@context/map-context";
+
+/**
+ * renders the link builder to recreate the current view elsewhere
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const BuildLink = () => {
+    // get the layers in state
+    const { defaultModelLayers } = useLayers();
+
+    /**
+     * create the query string that can be used to share the current view
+     */
+    const createLink = () => {
+        // get the list of selected layers
+        const groups = defaultModelLayers
+            // get all the distinct groups
+            .filter((val, idx, self) =>
+                ( idx === self.findIndex((t)=> ( t['group'] === val['group'] ))))
+            // return the group name
+            .map((mbr) => (
+                mbr['group']
+            ))
+            // generate a query string
+            .join(',');
+
+        // check to see if there was one or more groups selected
+        if (groups !== '') {
+            // copy the link to the cut/paste buffer
+            copyTextToClipboard(window.location.origin + '/#share=' + groups).then();
+
+            // tell the user what just happened
+            alert('The share link has been copied to the clipboard.');
+        }
+        // no layers were selected on the map
+        else
+            alert('There were no layers selected.');
+    };
+
+    /**
+     *  async function to copy the share link to the clipboard
+     *
+     * @param text
+     * @returns {Promise<void>}
+     */
+    async function copyTextToClipboard(text) {
+        // wait for the copy to complete
+        return await navigator.clipboard.writeText(text);
+    }
+
+    // render the button
+    return (
+        <Fragment>
+            <IconButton onClick={ createLink }>Share&nbsp;
+                <ShareRoundedIcon color={'primary'} />
+            </IconButton>
+        </Fragment>
+    );
+};

src/components/share/index.js

@@ -0,0 +1,3 @@
+export * from './share';
+export * from './buildlink';
+export * from './screenshot';