From 1ed3e939b13026c323df79ecb18d215f11170e05 Mon Sep 17 00:00:00 2001
From: Fabian Steeg <steeg@hbz-nrw.de>
Date: Thu, 10 Dec 2020 10:50:50 +0100
Subject: [PATCH] Set up visualization of team.json data with vis.js network

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

See https://github.com/hbz/lobid/issues/427
---
 .gitignore                                 |  2 +
 gatsby/lobid/gatsby-node.js                |  5 +++
 gatsby/lobid/src/components/visual.html.js | 47 ++++++++++++++++++++++
 gatsby/lobid/src/pages/visual.js           | 34 ++++++++++++++++
 gatsby/lobid/static/stylesheets/lobid.css  |  7 ++++
 5 files changed, 95 insertions(+)
 create mode 100644 gatsby/lobid/src/components/visual.html.js
 create mode 100644 gatsby/lobid/src/pages/visual.js

diff --git a/.gitignore b/.gitignore
index 5ea82470..b8d862d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,6 +64,8 @@ typings/
 # gatsby files
 .cache/
 public
+bin
+target
 
 # Mac files
 .DS_Store
diff --git a/gatsby/lobid/gatsby-node.js b/gatsby/lobid/gatsby-node.js
index 4140ed50..84850f98 100644
--- a/gatsby/lobid/gatsby-node.js
+++ b/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`)
+  });
 };
\ No newline at end of file
diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js
new file mode 100644
index 00000000..7e5a1143
--- /dev/null
+++ b/gatsby/lobid/src/components/visual.html.js
@@ -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} />
+    );
+  }
+}
diff --git a/gatsby/lobid/src/pages/visual.js b/gatsby/lobid/src/pages/visual.js
new file mode 100644
index 00000000..bca0b3f7
--- /dev/null
+++ b/gatsby/lobid/src/pages/visual.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
+        }
+      }
+    }
+  }
+`;
diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css
index 9e9c1d72..051a200e 100644
--- a/gatsby/lobid/static/stylesheets/lobid.css
+++ b/gatsby/lobid/static/stylesheets/lobid.css
@@ -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');