Bump versions of all libraries in UI.

clems4ever · clems4ever · commit 85a95ad5c841 · 2020-12-10T16:19:59.000+01:00
diff --git a/web/.gitignore b/web/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.eslintcache
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -3,32 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@material-ui/core": "^4.8.0",
-    "@material-ui/icons": "^4.5.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.13",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
     "@types/axios": "^0.14.0",
-    "@types/classnames": "^2.2.9",
-    "@types/d3": "^5.7.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-measure": "^2.0.5",
-    "@welldone-software/why-did-you-render": "^3.5.0",
-    "axios": "^0.19.0",
+    "@types/classnames": "^2.2.11",
+    "@types/d3": "^6.2.0",
+    "@types/jest": "^26.0.16",
+    "@types/node": "^14.14.10",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-measure": "^2.0.6",
+    "@welldone-software/why-did-you-render": "^6.0.3",
+    "axios": "^0.21.0",
     "classnames": "^2.2.6",
-    "d3": "^5.14.2",
-    "material-table": "^1.54.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-measure": "^2.3.0",
-    "react-scripts": "3.3.0",
-    "typescript": "~3.7.2"
+    "d3": "^6.3.0",
+    "material-table": "^1.69.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-measure": "^2.5.2",
+    "react-scripts": "4.0.1",
+    "typescript": "~4.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -52,4 +53,4 @@
     ]
   },
   "proxy": "http://graphkb:8080"
-}
+}
diff --git a/web/src/components/D3Graph.tsx b/web/src/components/D3Graph.tsx
@@ -160,11 +160,10 @@ const D3Graph = <Node extends NodeLike, Edge extends EdgeLike>(props: Props<Node
         const zoom = d3.zoom()
             .scaleExtent([0.5, 2])
             .translateExtent([[-5000, -5000], [5000 + bounds.width, 5000 + bounds.height]])
-            .on("zoom", zoomed);
-
-        function zoomed() {
-            graph.attr("transform", d3.event.transform);
-        }
+            .on("zoom", function zoomed(e) {
+                graph.attr("transform", e.transform);
+            }
+        );
 
         svg.call(zoom as any).on("dblclick.zoom", null);
     }, [bounds]);
@@ -238,8 +237,8 @@ const D3Graph = <Node extends NodeLike, Edge extends EdgeLike>(props: Props<Node
             .append("g")
             .attr("class", "node-group")
             .attr("z-index", "10")
-            .on("mouseover", function (d) {
-                d3.event.preventDefault();
+            .on("mouseover", function (ev, d) {
+                ev.preventDefault();
                 d3.select(this).select("circle").attr("stroke", "white");
                 d3.select(this).select("text").attr("stroke", "white");
                 if (!hoverDisabled.current) {
@@ -340,19 +339,19 @@ const D3Graph = <Node extends NodeLike, Edge extends EdgeLike>(props: Props<Node
         }
 
         const dragDrop: any = d3.drag()
-            .on('start', (node: any) => {
+            .on('start', (ev: any, node: any) => {
                 hoverDisabled.current = true;
-                if (!d3.event.active) simulation.alphaTarget(0.1).restart();
+                if (!ev.active) simulation.alphaTarget(0.1).restart();
                 node.fx = node.x;
                 node.fy = node.y;
             })
-            .on('drag', (node: any) => {
-                node.fx = d3.event.x;
-                node.fy = d3.event.y;
+            .on('drag', (ev: any, node: any) => {
+                node.fx = ev.x;
+                node.fy = ev.y;
             })
-            .on('end', (node: any) => {
+            .on('end', (ev: any, node: any) => {
                 hoverDisabled.current = false;
-                if (!d3.event.active) simulation.alphaTarget(0)
+                if (!ev.active) simulation.alphaTarget(0)
                 node.fx = null;
                 node.fy = null;
             })
diff --git a/web/src/components/DatabaseDialog.tsx b/web/src/components/DatabaseDialog.tsx
@@ -10,7 +10,7 @@ export interface Props {
     onClose: () => void;
 }
 
-export default function (props: Props) {
+export default function DatabaseDialog(props: Props) {
     const classes = useStyles();
     return (
         <Dialog
diff --git a/web/src/components/GraphExplorer.tsx b/web/src/components/GraphExplorer.tsx
@@ -40,7 +40,7 @@ function relationKey(r: Relation): string {
     return `${r.from_id}-${r.type}-${r.to_id}`;
 }
 
-export default function (props: Props) {
+export default function GraphExplorer (props: Props) {
     const [nodes, setNodes] = useState([] as D3Node[]);
     const [edges, setEdges] = useState([] as D3Link[]);
     const [assetHovered, setAssetHovered] = useState(undefined as Asset | undefined);
diff --git a/web/src/components/QueryField.tsx b/web/src/components/QueryField.tsx
@@ -9,7 +9,7 @@ export interface Props {
     onSubmit: () => void;
 }
 
-export default function (props: Props) {
+export default function QueryField (props: Props) {
     const styles = useStyles();
     const inputRef = useRef<HTMLInputElement>();
     const [cursor, setCursor] = useState({ line: 0, column: 0 } as Cursor);
diff --git a/web/src/components/SchemaGraphDialog.tsx b/web/src/components/SchemaGraphDialog.tsx
@@ -11,7 +11,7 @@ export interface Props {
     onClose: () => void;
 }
 
-export default function (props: Props) {
+export default function SchemaGraphDialog (props: Props) {
     const theme = useTheme();
     const styles = useStyles();
     const [selectedSources, setSelectedSources] = useState<string[]>([]);
diff --git a/web/src/components/SchemaGraphExplorer.tsx b/web/src/components/SchemaGraphExplorer.tsx
@@ -21,7 +21,7 @@ interface D3Link {
     label: string;
 }
 
-export default function (props: Props) {
+export default function SchemaGraphExplorer (props: Props) {
     const [graph, ,] = useSchemaGraph(props.sources);
 
     const nodes = graph ? graph.vertices
diff --git a/web/src/components/SearchField.tsx b/web/src/components/SearchField.tsx
@@ -15,7 +15,7 @@ export interface Props {
     onEnterKeyDown?: () => void;
 }
 
-export default function (props: Props) {
+export default function SearchField (props: Props) {
     const classes = useStyles();
 
     const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
diff --git a/web/src/views/ExplorerView.tsx b/web/src/views/ExplorerView.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { makeStyles, Grid, Snackbar, SnackbarContent, Paper, useTheme, IconButton } from '@material-ui/core';
+import { makeStyles, Grid, Snackbar, Paper, useTheme } from '@material-ui/core';
 import GraphExplorer from '../components/GraphExplorer';
 import QueryField from '../components/QueryField';
 import { postQuery, getSources, getDatabaseDetails } from "../services/SourceGraph";
@@ -15,6 +15,11 @@ import DatabaseDialog from '../components/DatabaseDialog';
 import { DatabaseDetails } from '../models/DatabaseDetails';
 import SearchField from '../components/SearchField';
 import CloseIcon from '@material-ui/icons/Close';
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props: any) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 const QUERY = `MATCH (n0)-[r]-(n1) RETURN n0, r, n1 LIMIT 20`;
 
@@ -96,22 +101,9 @@ const ExplorerView = () => {
                     vertical: 'top',
                     horizontal: 'right',
                 }}>
-                <SnackbarContent message={error
-                    ? <span style={{ display: 'flex', alignItems: 'center' }}>
-                        <ErrorIcon style={{ fontSize: 20, marginRight: theme.spacing() }} />
-                        {error.message}
-                    </span>
-                    : ""}
-                    style={{
-                        backgroundColor: theme.palette.error.dark,
-                        color: "white"
-                    }}
-                    action={
-                        <IconButton size="small" aria-label="close" color="inherit" onClick={() => setError(undefined)}>
-                            <CloseIcon fontSize="small" />
-                        </IconButton>
-                    }>
-                </SnackbarContent>
+                    <Alert onClose={() => setError(undefined)} severity="error">
+                        {error ? error.message : ""}
+                    </Alert>
             </Snackbar>
             <div className={styles.container}>
                 <DatabaseDialog
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export interface Props {`
`10`	`10`	`onClose: () => void;`
`11`	`11`	`}`
`12`	`12`
`13`		`-export default function (props: Props) {`
	`13`	`+export default function DatabaseDialog(props: Props) {`
`14`	`14`	`const classes = useStyles();`
`15`	`15`	`return (`
`16`	`16`	`<Dialog`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ function relationKey(r: Relation): string {`
`40`	`40`	return `${r.from_id}-${r.type}-${r.to_id}`;
`41`	`41`	`}`
`42`	`42`
`43`		`-export default function (props: Props) {`
	`43`	`+export default function GraphExplorer (props: Props) {`
`44`	`44`	`const [nodes, setNodes] = useState([] as D3Node[]);`
`45`	`45`	`const [edges, setEdges] = useState([] as D3Link[]);`
`46`	`46`	`const [assetHovered, setAssetHovered] = useState(undefined as Asset \| undefined);`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export interface Props {`
`9`	`9`	`onSubmit: () => void;`
`10`	`10`	`}`
`11`	`11`
`12`		`-export default function (props: Props) {`
	`12`	`+export default function QueryField (props: Props) {`
`13`	`13`	`const styles = useStyles();`
`14`	`14`	`const inputRef = useRef<HTMLInputElement>();`
`15`	`15`	`const [cursor, setCursor] = useState({ line: 0, column: 0 } as Cursor);`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export interface Props {`
`11`	`11`	`onClose: () => void;`
`12`	`12`	`}`
`13`	`13`
`14`		`-export default function (props: Props) {`
	`14`	`+export default function SchemaGraphDialog (props: Props) {`
`15`	`15`	`const theme = useTheme();`
`16`	`16`	`const styles = useStyles();`
`17`	`17`	`const [selectedSources, setSelectedSources] = useState<string[]>([]);`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ interface D3Link {`
`21`	`21`	`label: string;`
`22`	`22`	`}`
`23`	`23`
`24`		`-export default function (props: Props) {`
	`24`	`+export default function SchemaGraphExplorer (props: Props) {`
`25`	`25`	`const [graph, ,] = useSchemaGraph(props.sources);`
`26`	`26`
`27`	`27`	`const nodes = graph ? graph.vertices`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export interface Props {`
`15`	`15`	`onEnterKeyDown?: () => void;`
`16`	`16`	`}`
`17`	`17`
`18`		`-export default function (props: Props) {`
	`18`	`+export default function SearchField (props: Props) {`
`19`	`19`	`const classes = useStyles();`
`20`	`20`
`21`	`21`	`const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {`