SERVER-52576 Added libdeps graph visualizer web service with basic features.

buildscripts/libdeps/graph_visualizer_web_stack/src/GraphInfo.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import { connect } from "react-redux";
+import { getCounts } from "./redux/store";
+
+const columns = [
+  { id: "ID", field: "type", headerName: "Count Type", width: 50 },
+  { field: "value", headerName: "Value", width: 50 },
+];
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 50,
+  },
+});
+
+const GraphInfo = ({ counts, datawidth }) => {
+  const classes = useStyles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} size="small" aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            {columns.map((column, index) => {
+              return <TableCell key={index}>{column.headerName}</TableCell>;
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {counts.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell component="th" scope="row">
+                {row.type}
+              </TableCell>
+              <TableCell>{row.value}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default connect(getCounts)(GraphInfo);