Set up visualization of team.json data with vis.js network

Vis.js: https://visjs.org/, https://lobid.org/gnd/116994061#rels

See #427

Author: fsteeg

.gitignore

@@ -64,6 +64,9 @@ typings/
 # gatsby files
 .cache/
 public
+bin
+target
+tmp
 
 # Mac files
 .DS_Store

gatsby/lobid/gatsby-node.js

@@ -7,4 +7,9 @@ exports.createPages = ({ actions }) => {
     path: "/team",
     component: path.resolve(`./src/pages/team-de.js`)
   });
+
+  createPage({
+    path: "/visual",
+    component: path.resolve(`./src/pages/visual.js`)
+  });
 };

gatsby/lobid/package-lock.json

@@ -25,7 +25,9 @@
     "react-dom": "^16.12.0",
     "reactstrap": "^8.4.1",
     "typescript": "^3.6.0-beta",
-    "utf-8-validate": "^5.0.2"
+    "utf-8-validate": "^5.0.2",
+    "vis-data": "^7.1.1",
+    "vis-network": "^8.5.4"
   },
   "devDependencies": {
     "prettier": "^1.19.1"

gatsby/lobid/package.json

@@ -0,0 +1,47 @@
+import React, { Component, createRef } from "react";
+import { DataSet, Network} from 'vis-network/standalone/esm/vis-network';
+
+import "./css/lobid.css";
+
+export class Visual extends Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      infoToggled: false
+    };
+    this.network = {};
+    this.appRef = createRef();
+  }
+
+  componentDidMount() {
+    console.log("Props", this.props)
+
+    var ns = [
+      { id: 'm', label: "Members","shape":"dot","size":"5"},
+      { id: 'o', label: "Offers","shape":"dot","size":"5"}
+    ];
+    this.props.members.forEach((item,index) => { ns.push({ id: "m"+index, label: item.member.name, "shape":"box" }); });
+    this.props.products.forEach((item,index) => { ns.push({ id: "o"+index, label: item.name, "shape":"box" }); });
+    const nodes = new DataSet(ns);
+  
+    var es = [];
+    this.props.members.forEach((item,index) => { es.push({ from: 'm', to: 'm'+index }); });
+    this.props.products.forEach((item,index) => { es.push({ from: 'o', to: 'o'+index }); });
+    const edges = new DataSet(es);
+    
+    const data = {
+      nodes: nodes,
+      edges: edges
+    };
+    const options = {};
+    this.network = new Network(this.appRef.current, data, options);
+  }
+
+  render() {
+    return (
+      <div id="lobid-network" ref={this.appRef} />
+    );
+  }
+}

gatsby/lobid/src/components/visual.html.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { graphql } from "gatsby";
+import { Visual } from "../components/visual.html";
+
+export default ({ data }) => (
+  <Visual
+    members = {data.dataJson.member}
+    products = {data.dataJson.makesOffer}
+  />
+);
+
+export const query = graphql`
+  query {
+    dataJson {
+      makesOffer {
+        alternateName {
+          de
+        }
+        id
+        name
+      }
+      member {
+        member {
+          id
+          image
+          name
+        }
+        roleName {
+          de
+        }
+      }
+    }
+  }
+`;

gatsby/lobid/src/pages/visual.js

@@ -1,3 +1,10 @@
+#lobid-network {
+	width: 900px;
+	height: 600px;
+	border: 1px solid lightgray;
+	margin: 20px;
+}
+
 #header {
 	width: 100%;
 	background-image: url('https://lobid.org/images/clouds.jpg');