From 2b87ca3f888fd8dbe70ec300b0625670dbc82297 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Thu, 10 Dec 2020 10:50:50 +0100 Subject: [PATCH 1/3] 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 ( +
+ ); + } +} 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 }) => ( + +); + +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'); From 8bce899b799f4ca505fe2e68253f4592ec9a1793 Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Thu, 10 Dec 2020 16:16:34 +0100 Subject: [PATCH 2/3] Extract header and footer to sub-components, reuse for /visual See https://github.com/hbz/lobid/issues/427 --- gatsby/lobid/src/components/footer.html.js | 46 +++++ gatsby/lobid/src/components/header.html.js | 164 +++++++++++++++++ gatsby/lobid/src/components/team.html.js | 203 ++------------------- gatsby/lobid/src/components/visual.html.js | 36 +++- gatsby/lobid/src/pages/visual.js | 15 ++ gatsby/lobid/static/stylesheets/lobid.css | 3 +- 6 files changed, 273 insertions(+), 194 deletions(-) create mode 100644 gatsby/lobid/src/components/footer.html.js create mode 100644 gatsby/lobid/src/components/header.html.js diff --git a/gatsby/lobid/src/components/footer.html.js b/gatsby/lobid/src/components/footer.html.js new file mode 100644 index 00000000..869d9d18 --- /dev/null +++ b/gatsby/lobid/src/components/footer.html.js @@ -0,0 +1,46 @@ +import React from "react" + +import wappenPng from "./images/wappen.png"; + +export default class Footer extends React.Component { + render() { + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/gatsby/lobid/src/components/header.html.js b/gatsby/lobid/src/components/header.html.js new file mode 100644 index 00000000..84e80499 --- /dev/null +++ b/gatsby/lobid/src/components/header.html.js @@ -0,0 +1,164 @@ +import React from "react" + +import { + UncontrolledDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from "reactstrap"; + +import lobidLogoPng from "./images/lobid.png"; + +export default class Header extends React.Component { + render() { + return ( +
+ +
) + } +} + diff --git a/gatsby/lobid/src/components/team.html.js b/gatsby/lobid/src/components/team.html.js index 63b92dcc..76cbbce4 100644 --- a/gatsby/lobid/src/components/team.html.js +++ b/gatsby/lobid/src/components/team.html.js @@ -1,17 +1,12 @@ import React from "react"; -import { - UncontrolledDropdown, - DropdownToggle, - DropdownMenu, - DropdownItem -} from "reactstrap"; +import Header from "./header.html"; +import Footer from "./footer.html"; import "./css/lobid.css"; import "./css/bootstrap.min.css"; import "./css/font-awesome.min.css"; import hbzLogoPng from "./images/hbz.png"; -import lobidLogoPng from "./images/lobid.png"; import twitterLogoBluePng from "./images/Twitter_logo_blue.png"; import mailPng from "./images/mail.png"; import jsonLdPng from "./images/json-ld.png"; @@ -19,7 +14,6 @@ import feedPng from "./images/feed.png"; import gitHubMark32pxPng from "./images/GitHub-Mark-32px.png"; import mailmanJpg from "./images/mailman.jpg"; import freenodePng from "./images/freenode.png"; -import wappenPng from "./images/wappen.png"; export class Team extends React.Component { constructor(props) { @@ -58,156 +52,18 @@ export class Team extends React.Component { ); }; render() { + console.log('Header', Header); return (

-

- -
+

@@ -444,42 +300,7 @@ export class Team extends React.Component { {this.props.makesOfferAlternateName3}

- +
); } diff --git a/gatsby/lobid/src/components/visual.html.js b/gatsby/lobid/src/components/visual.html.js index 7e5a1143..730a860c 100644 --- a/gatsby/lobid/src/components/visual.html.js +++ b/gatsby/lobid/src/components/visual.html.js @@ -1,8 +1,12 @@ import React, { Component, createRef } from "react"; import { DataSet, Network} from 'vis-network/standalone/esm/vis-network'; +import Header from "./header.html"; +import Footer from "./footer.html"; import "./css/lobid.css"; +import hbzLogoPng from "./images/hbz.png"; + export class Visual extends Component { constructor(props) { @@ -41,7 +45,37 @@ export class Visual extends Component { render() { return ( -
+
+

+

+
+
+

+ hbz logo + lobid — {this.props.subtitle} +

+
+

+ + Dies ist eine experimentelle Visualisierung der Daten aus /team.json, + die auch zur Darstellung von /team verwendet werden. + +

+
+
+
+
); } } diff --git a/gatsby/lobid/src/pages/visual.js b/gatsby/lobid/src/pages/visual.js index bca0b3f7..803a39f9 100644 --- a/gatsby/lobid/src/pages/visual.js +++ b/gatsby/lobid/src/pages/visual.js @@ -6,6 +6,15 @@ export default ({ data }) => ( ); @@ -29,6 +38,12 @@ export const query = graphql` de } } + contactPoint { + contactType { + de + } + id + } } } `; diff --git a/gatsby/lobid/static/stylesheets/lobid.css b/gatsby/lobid/static/stylesheets/lobid.css index 051a200e..c75fddc8 100644 --- a/gatsby/lobid/static/stylesheets/lobid.css +++ b/gatsby/lobid/static/stylesheets/lobid.css @@ -1,7 +1,6 @@ #lobid-network { width: 900px; - height: 600px; - border: 1px solid lightgray; + height: 500px; margin: 20px; } From 98cb3a44b2009ac693264f635d711428e168240d Mon Sep 17 00:00:00 2001 From: Fabian Steeg Date: Mon, 14 Dec 2020 15:54:34 +0100 Subject: [PATCH 3/3] Set up gatsby build in Travis CI --- .travis.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..d6b9d230 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,9 @@ +language: node_js +node_js: + - "lts/*" +before_script: + - npm install -g gatsby +script: + - cd gatsby/lobid/ + - npm install + - gatsby build