From 2b87ca3f888fd8dbe70ec300b0625670dbc82297 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                                 |  3 ++
 gatsby/lobid/gatsby-node.js                |  5 +++
 gatsby/lobid/package-lock.json             | 10 +++++
 gatsby/lobid/package.json                  |  4 +-
 gatsby/lobid/src/components/visual.html.js | 47 ++++++++++++++++++++++
 gatsby/lobid/src/pages/visual.js           | 34 ++++++++++++++++
 gatsby/lobid/static/stylesheets/lobid.css  |  7 ++++
 7 files changed, 109 insertions(+), 1 deletion(-)
 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..9ff50a36 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,6 +64,9 @@ typings/
 # gatsby files
 .cache/
 public
+bin
+target
+tmp
 
 # 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/package-lock.json b/gatsby/lobid/package-lock.json
index 6346eae1..c74a80a2 100644
--- a/gatsby/lobid/package-lock.json
+++ b/gatsby/lobid/package-lock.json
@@ -15902,6 +15902,16 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vis-data": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.1.tgz",
+      "integrity": "sha512-Z5+caySDqoKL9yxbI3c/CKmUcSvROSZstuvwxbOsUpdxHpxFYEUgxC1EH4lSB1ykEaM54MVMM1UcwB9oNaWFlw=="
+    },
+    "vis-network": {
+      "version": "8.5.4",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.5.4.tgz",
+      "integrity": "sha512-KeYHlTZpbPHS6868MHnMtRXDTmKA0YwQQl/mC5cBiICGH67ilzOqkyWObAMyeo8b8Z/6pTfFJEu9g70EvWqOYA=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/gatsby/lobid/package.json b/gatsby/lobid/package.json
index a501f01c..ffac9784 100644
--- a/gatsby/lobid/package.json
+++ b/gatsby/lobid/package.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"
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');