Merge pull request #205 from amosproj/hierarchical-graph-layout

Hierarchical graph layout

frontend/src/routing/routes.tsx

@@ -30,6 +30,11 @@ const routes: Record<string, RouteDefinition> = {
         label: 'Schema',
         content: () => <Schema />,
       },
+      {
+        path: '/visualization/hierarchical',
+        label: 'Hierarchies',
+        content: () => <Graph layout="hierarchical" />,
+      },
     ],
   },
   Exploration: {

frontend/src/visualization/Graph.tsx

@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
 import VisGraph, { GraphData } from 'react-graph-vis';
-import * as vis from 'vis-network';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { uuid } from 'uuidv4';
 import { tap } from 'rxjs/operators';
 import useService from '../dependency-injection/useService';
-import { EdgeDescriptor } from '../shared/entities';
-import { NodeResultDescriptor, QueryResult } from '../shared/queries';
 import { useSize } from '../utils/useSize';
 import Filter from './filtering/Filter';
 import useObservable from '../utils/useObservable';
 import QueryResultStore from '../stores/QueryResultStore';
+import convertQueryResult from './shared-ops/convertQueryResult';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -45,54 +43,16 @@ const useStyles = makeStyles(() =>
   })
 );
 
-function convertNode(node: NodeResultDescriptor): vis.Node {
-  const result: vis.Node = {
-    id: node.id,
-    label: node.id.toString(),
-    // Advanced stuff, like styling nodes with different types differently...
-  };
-
-  if (node.subsidiary) {
-    result.color = 'yellow';
-  }
-
-  return result;
-}
-
-function convertNodes(nodes: NodeResultDescriptor[]): vis.Node[] {
-  return nodes.map((node) => convertNode(node));
-}
-
-function convertEdge(edge: EdgeDescriptor): vis.Edge {
-  return {
-    id: edge.id,
-    from: edge.from,
-    to: edge.to,
-    // Advanced stuff, like styling edges with different types differently...
-  };
-}
-
-function convertEdges(edges: EdgeDescriptor[]): vis.Edge[] {
-  return edges.map((edge) => convertEdge(edge));
-}
-
-function convertQueryResult(queryResult: QueryResult): GraphData {
-  return {
-    nodes: convertNodes(queryResult.nodes),
-    edges: convertEdges(queryResult.edges),
-  };
-}
-
 /**
  * Builds the graph options passed to react-graph-vis.
  * @param width The width of the graph.
  * @param height The height of the graph.
  * @returns The react-graph-vis options.
  */
-function buildOptions(width: number, height: number) {
+function buildOptions(width: number, height: number, layout?: string) {
   return {
     layout: {
-      hierarchical: false,
+      hierarchical: layout === 'hierarchical',
     },
     edges: {
       color: '#000000',
@@ -102,7 +62,12 @@ function buildOptions(width: number, height: number) {
   };
 }
 
-function Graph(): JSX.Element {
+type GraphProps = {
+  layout?: string;
+};
+
+function Graph(props: GraphProps): JSX.Element {
+  const { layout } = props;
   const classes = useStyles();
 
   // A React ref to the container that is used to measure the available space for the graph.
@@ -138,7 +103,11 @@ function Graph(): JSX.Element {
         <div className={classes.graphContainer}>
           <VisGraph
             graph={graphData}
-            options={buildOptions(containerSize.width, containerSize.height)}
+            options={buildOptions(
+              containerSize.width,
+              containerSize.height,
+              layout
+            )}
             key={uuid()}
           />
         </div>
@@ -150,4 +119,8 @@ function Graph(): JSX.Element {
   );
 }
 
+Graph.defaultProps = {
+  layout: undefined,
+};
+
 export default Graph;

frontend/src/visualization/Visualization.tsx

@@ -17,7 +17,7 @@ function Visualization(): JSX.Element {
 
   // TODO: remove placeholder grids and fill cards with existing tabs
   const schemaCard = cards[cards.length - 1];
-  const placeholders = Array<CardDefinition>(4).fill(schemaCard);
+  const placeholders = Array<CardDefinition>(3).fill(schemaCard);
 
   return (
     <>

frontend/src/visualization/dashboard-card/cardContents.tsx

@@ -21,6 +21,12 @@ const cardContents: Array<CardPresentationContent> = [
     description: 'Take a deeper look into the database structure',
     icon: 'account_tree',
   },
+  {
+    label: 'Hierarchies',
+    subLabel: 'Node relations',
+    description: 'Display queried data in a hierarchically structured graph.',
+    icon: 'device_hub',
+  },
 ];
 
 /**

frontend/src/visualization/shared-ops/convertQueryResult.ts

@@ -0,0 +1,44 @@
+import { GraphData } from 'react-graph-vis';
+import * as vis from 'vis-network';
+import { EdgeDescriptor } from '../../shared/entities';
+import { NodeResultDescriptor, QueryResult } from '../../shared/queries';
+
+function convertNode(node: NodeResultDescriptor): vis.Node {
+  const result: vis.Node = {
+    id: node.id,
+    label: node.id.toString(),
+    // Advanced stuff, like styling nodes with different types differently...
+  };
+
+  if (node.subsidiary) {
+    result.color = 'yellow';
+  }
+
+  return result;
+}
+
+function convertNodes(nodes: NodeResultDescriptor[]): vis.Node[] {
+  return nodes.map((node) => convertNode(node));
+}
+
+function convertEdge(edge: EdgeDescriptor): vis.Edge {
+  return {
+    id: edge.id,
+    from: edge.from,
+    to: edge.to,
+    // Advanced stuff, like styling edges with different types differently...
+  };
+}
+
+function convertEdges(edges: EdgeDescriptor[]): vis.Edge[] {
+  return edges.map((edge) => convertEdge(edge));
+}
+
+export default function convertQueryResult(
+  queryResult: QueryResult
+): GraphData {
+  return {
+    nodes: convertNodes(queryResult.nodes),
+    edges: convertEdges(queryResult.edges),
+  };
+}