Add the query as a query parameter in UI.

Author: clems4ever

web/package-lock.json

@@ -20,16 +20,20 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-measure": "^2.0.6",
+    "@types/react-router-dom": "^5.1.6",
     "@welldone-software/why-did-you-render": "^6.0.3",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "d3": "^6.3.0",
     "material-table": "^1.69.2",
+    "query-string": "^6.13.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-measure": "^2.5.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "typescript": "~4.1.2"
+    "typescript": "~4.1.2",
+    "use-query-params": "^1.1.9"
   },
   "scripts": {
     "start": "react-scripts start",

web/package.json

@@ -1,6 +1,8 @@
 import React from 'react';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core';
 import ExplorerView from './views/ExplorerView';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
 
 if (process.env.NODE_ENV !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -16,7 +18,11 @@ const App: React.FC = () => {
 
   return (
     <ThemeProvider theme={darkTheme}>
-      <ExplorerView />
+      <Router>
+        <QueryParamProvider ReactRouterRoute={Route}>
+          <ExplorerView />
+        </QueryParamProvider>  
+      </Router>
     </ThemeProvider >
   );
 }

web/src/App.tsx

@@ -252,7 +252,7 @@ const D3Graph = <Node extends NodeLike, Edge extends EdgeLike>(props: Props<Node
                     onNodeMouseOutCallback(d.data);
                 }
             })
-            .on("dblclick", function (d) {
+            .on("dblclick", function (ev, d) {
                 onNodeDoubleClickCallback(d.data);
             });
 

web/src/components/D3Graph.tsx

@@ -14,6 +14,7 @@ import DatabaseDialog from '../components/DatabaseDialog';
 import { DatabaseDetails } from '../models/DatabaseDetails';
 import SearchField from '../components/SearchField';
 import MuiAlert from '@material-ui/lab/Alert';
+import { useQueryParam, StringParam, withDefault } from 'use-query-params';
 
 function Alert(props: any) {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
@@ -26,6 +27,7 @@ const ExplorerView = () => {
     const styles = useStyles();
     const [sources, setSources] = useState(undefined as string[] | undefined);
     const [query, setQuery] = useState(QUERY);
+    const [submittedQuery, setSubmittedQuery] = useQueryParam("q", withDefault(StringParam, QUERY));
     const [queryResult, setQueryResult] = useState(undefined as QueryResultSet | undefined);
     const [isQueryLoading, setIsQueryLoading] = useState(false);
     const [error, setError] = useState(undefined as undefined | Error);
@@ -36,16 +38,23 @@ const ExplorerView = () => {
     const [searchFocus, setSearchFocus] = useState(false);
 
     const handleQuerySubmit = useCallback(async (q: string) => {
-        setIsQueryLoading(true);
-        try {
-            const res = await postQuery(q);
-            setQueryResult(res);
-        } catch (err) {
-            console.error(err);
-            setError(err);
-        }
-        setIsQueryLoading(false);
-    }, [setIsQueryLoading, setQueryResult]);
+        setSubmittedQuery(q);
+    }, [setSubmittedQuery]);
+
+    useEffect(() => {
+        (async function() {
+            setIsQueryLoading(true);
+            try {
+                const res = await postQuery(submittedQuery);
+                setQueryResult(res);
+            } catch (err) {
+                console.error(err);
+                setError(err);
+            }
+            setIsQueryLoading(false);
+        })();
+        setQuery(submittedQuery);
+    }, [submittedQuery]);
 
     const getSourcesCallback = useCallback(async () => {
         try {