Rnd 421 processed data rendering

package.json

@@ -7,25 +7,26 @@
   "dependencies": {
     "@material-ui/core": "^4.7.0",
     "@material-ui/icons": "^4.5.1",
+    "@reduxjs/toolkit": "^1.7.2",
     "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "gremlin": "^3.4.4",
     "lodash": "^4.17.15",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-json-to-table": "^0.1.5",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.6",
     "react-scripts": "^3.2.0",
-    "redux": "^4.0.4",
+    "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
     "vis-network": "^6.4.4"
   },
   "proxy": "http://localhost:3001",
   "scripts": {
     "client": "react-scripts start",
-    "server": "node proxy-server.js",
+    "server": "nodemon proxy-server.js",
     "start": "concurrently \"npm run server\" \"npm run client\"",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

proxy-server.js

@@ -2,52 +2,68 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const gremlin = require('gremlin');
 const cors = require('cors');
+
 const app = express();
 const port = 3001;
 
-app.use(cors({
-  credentials: true,
-}));
+app.use(cors({ credentials: true, }));
 
-// parse application/json
 app.use(bodyParser.json());
 
-function mapToObj(inputMap) {
-  let obj = {};
+const dataProcessingFunction = (obj) => {
 
-  inputMap.forEach((value, key) => {
-    obj[key] = value
-  });
+  if (obj instanceof Map) return dataProcessingFunction(Object.fromEntries(obj))
 
-  return obj;
-}
+  if (Array.isArray(obj)) {
+    const newObj = obj.map((el) => el instanceof Map ? dataProcessingFunction(Object.fromEntries(el)) : el)
 
-function edgesToJson(edgeList) {
-  return edgeList.map(
-    edge => ({
-      id: typeof edge.get('id') !== "string" ? JSON.stringify(edge.get('id')) : edge.get('id'),
-      from: edge.get('from'),
-      to: edge.get('to'),
-      label: edge.get('label'),
-      properties: mapToObj(edge.get('properties')),
-    })
-  );
-}
+    if (newObj[0] instanceof Map) {
+      return dataProcessingFunction(newObj)
+    }
+    return newObj
+
+  } else if (typeof obj === 'object') {
+
+    for (let prop in obj) {
+
+      if (obj[prop][0] instanceof Map) {
+        obj[prop] = dataProcessingFunction(obj[prop][0])
+      }
 
-function nodesToJson(nodeList) {
-  return nodeList.map(
-    node => ({
-      id: node.get('id'),
-      label: node.get('label'),
-      properties: mapToObj(node.get('properties')),
-      edges: edgesToJson(node.get('edges'))
-    })
-  );
+      else if (obj[prop] instanceof Map) {
+        obj[prop] = dataProcessingFunction(obj[prop])
+      }
+
+      else if (Array.isArray(obj[prop])) {
+        obj[prop] = obj[prop].map((el) => dataProcessingFunction(el))
+      }
+    }
+  }
+
+  return obj
 }
 
+
+const nodesToJson = (nodeList) => dataProcessingFunction(nodeList)
+
+
 function makeQuery(query, nodeLimit) {
-  const nodeLimitQuery = !isNaN(nodeLimit) && Number(nodeLimit) > 0 ? `.limit(${nodeLimit})`: '';
-  return `${query}${nodeLimitQuery}.dedup().as('node').project('id', 'label', 'properties', 'edges').by(__.id()).by(__.label()).by(__.valueMap().by(__.unfold())).by(__.outE().project('id', 'from', 'to', 'label', 'properties').by(__.id()).by(__.select('node').id()).by(__.inV().id()).by(__.label()).by(__.valueMap().by(__.unfold())).fold())`;
+  const nodeLimitQuery = !isNaN(nodeLimit) && Number(nodeLimit) > 0 ? `.limit(${nodeLimit})` : '';
+  return `${query}${nodeLimitQuery}.dedup().as('node')
+  .project('id', 'label', 'properties', 'edges')
+  .by(__.id())
+  .by(__.label())
+  .by(properties().group().by(key).by(union(__.value(),__.valueMap()).fold()).fold())
+  .by(__.outE()
+    .project('id', 'from', 'to', 'label', 'properties')
+    .by(__.id())
+    .by(__.select('node').id())
+    .by(__.inV().id())
+    .by(__.label())
+    .by(__.valueMap()
+    .by(__.unfold())
+  )
+  .fold())`;
 }
 
 app.post('/query', (req, res, next) => {
@@ -56,7 +72,7 @@ app.post('/query', (req, res, next) => {
   const nodeLimit = req.body.nodeLimit;
   const query = req.body.query;
 
-  const client = new gremlin.driver.Client(`ws://${gremlinHost}:${gremlinPort}/gremlin`, { traversalSource: 'g', mimeType: 'application/json' });
+  const client = new gremlin.driver.Client(`ws://${gremlinHost}:${gremlinPort}/gremlin`, { traversalSource: `${query.split('.')[0]}`, mimeType: 'application/json' });
 
   client.submit(makeQuery(query, nodeLimit), {})
     .then((result) => res.send(nodesToJson(result._items)))

src/App.js

@@ -1,27 +1,25 @@
 import React from 'react';
-import { Grid }  from '@material-ui/core';
-import { NetworkGraphComponent } from './components/NetworkGraph/NetworkGraphComponent';
-import { HeaderComponent } from './components/Header/HeaderComponent';
-import { DetailsComponent } from './components/Details/DetailsComponent';
+import { Grid } from '@material-ui/core';
+import { Header } from './components/Header/HeaderComponent';
+import { NetworkGraph } from './components/NetworkGraph/NetworkGraphComponent';
+import { Details } from './components/Details/DetailsComponent';
 
-
-export class App extends React.Component{
-  render(){
-    return (
-      <div>
-        <Grid container spacing={1}>
-          <Grid item xs={12} sm={12} md={12}>
-            <HeaderComponent />
-          </Grid>
-          <Grid item xs={12} sm={9} md={9}>
-            <NetworkGraphComponent />
-          </Grid>
-          <Grid item xs={12} sm={3} md={3}>
-            <DetailsComponent />
-          </Grid>
+export const App = () => {
+  return (
+    <>
+      <Grid container spacing={1}>
+        <Grid item xs={12} sm={12} md={12}>
+          <Header />
         </Grid>
-
-      </div>
-      );
-  }
+        <Grid item xs={12} sm={9} md={9}>
+          <NetworkGraph />
+        </Grid>
+        <Grid item xs={12} sm={3} md={3}>
+          <Details />
+        </Grid>
+      </Grid>
+    </>
+  )
 }
+
+export default App