diff --git a/front/package-lock.json b/front/package-lock.json index 2ddf196e74..8137dc5a91 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -5105,11 +5105,6 @@ "minimalistic-crypto-utils": "^1.0.0" } }, - "emitter-component": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz", - "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY=" - }, "emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -7043,11 +7038,6 @@ "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" }, - "hammerjs": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", - "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" - }, "handle-thing": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz", @@ -9589,11 +9579,6 @@ "object.assign": "^4.1.0" } }, - "keycharm": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz", - "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk=" - }, "keyv": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz", @@ -14127,14 +14112,6 @@ "react-is": "^16.8.1" } }, - "propagating-hammerjs": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz", - "integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==", - "requires": { - "hammerjs": "^2.0.8" - } - }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -17557,17 +17534,15 @@ "extsprintf": "^1.2.0" } }, - "vis": { - "version": "4.21.0", - "resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0.tgz", - "integrity": "sha1-3XFji/9/ZJXQC8n0DCU1JhM97Ws=", - "requires": { - "emitter-component": "^1.1.1", - "hammerjs": "^2.0.8", - "keycharm": "^0.2.0", - "moment": "^2.18.1", - "propagating-hammerjs": "^1.4.6" - } + "vis-data": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.0.0.tgz", + "integrity": "sha512-qKpyAQ9UMT0QygLbCulgabKkgfo8aVkuWSqhvEiaah/iy/Dvj17iMFChUU+UIioorWlweXcp5ziXoMLIl7hTAg==" + }, + "vis-network": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.2.0.tgz", + "integrity": "sha512-2fnI4jINbluGT0MmZoIk0XkYLRFPvEbTbhP0A1xUYhbUiO28ARhlIMfR3Z3I4eaEo/E0lGVZYWH+2DWyohG0tw==" }, "vm-browserify": { "version": "1.1.2", diff --git a/front/package.json b/front/package.json index 4851c6092a..1926183231 100644 --- a/front/package.json +++ b/front/package.json @@ -56,7 +56,8 @@ "unistore": "^3.2.1", "useragent-parser-js": "^1.0.3", "uuid": "^3.3.2", - "vis": "^4.21.0" + "vis-data": "^7.0.0", + "vis-network": "^8.2.0" }, "jest": { "coverageDirectory": "./coverage/", diff --git a/front/src/routes/integration/all/zwave/network-page/NetworkTab.jsx b/front/src/routes/integration/all/zwave/network-page/NetworkTab.jsx index ce55e19faf..25c15a97c2 100644 --- a/front/src/routes/integration/all/zwave/network-page/NetworkTab.jsx +++ b/front/src/routes/integration/all/zwave/network-page/NetworkTab.jsx @@ -1,29 +1,77 @@ +import { Component } from 'preact'; import { Text } from 'preact-i18n'; +import { Network } from 'vis-network'; import { RequestStatus } from '../../../../../utils/consts'; -const NetworkTab = ({ children, ...props }) => { - const zwaveNotConfigured = props.zwaveGetNeighborsStatus === RequestStatus.ServiceNotConfigured; - return ( -
-
-

- -

-
- {zwaveNotConfigured && ( -
- +class NetworkTab extends Component { + setNetworkInput(input) { + this.networkInput = input; + } + + constructor(props) { + super(props); + + this.setNetworkInput = this.setNetworkInput.bind(this); + } + + componentDidUpdate() { + const { zwaveNodesNeighbors } = this.props; + if (zwaveNodesNeighbors) { + const nodes = zwaveNodesNeighbors.map(node => ({ + id: node.id, + label: node.product + })); + + const edges = []; + + const alreadyIn = {}; + + zwaveNodesNeighbors.forEach(node => { + node.neighbors.forEach(neighborId => { + if (!alreadyIn[`${neighborId}-${node.id}`]) { + edges.push({ + from: node.id, + to: neighborId + }); + alreadyIn[`${node.id}-${neighborId}`] = true; + } + }); + }); + + // provide the data in the vis format + let data = { + nodes, + edges + }; + let options = {}; + new Network(this.networkInput, data, options); + } + } + + render(props) { + const zwaveNotConfigured = props.zwaveGetNeighborsStatus === RequestStatus.ServiceNotConfigured; + return ( +
+
+

+ +

- )} -
-
- ); -}; + {zwaveNotConfigured && ( +
+ +
+ )} +
+
+ ); + } +} export default NetworkTab; diff --git a/front/src/routes/integration/all/zwave/network-page/actions.js b/front/src/routes/integration/all/zwave/network-page/actions.js index 44a1b76652..9393eb0a72 100644 --- a/front/src/routes/integration/all/zwave/network-page/actions.js +++ b/front/src/routes/integration/all/zwave/network-page/actions.js @@ -1,49 +1,8 @@ -import vis from 'vis'; import get from 'get-value'; import { RequestStatus } from '../../../../../utils/consts'; import { ERROR_MESSAGES } from '../../../../../../../server/utils/constants'; -function renderGraph(zwaveNodes) { - const nodeData = zwaveNodes.map(node => ({ - id: node.id, - label: node.product - })); - let nodes = new vis.DataSet(nodeData); - - const edgeData = []; - - const alreadyIn = {}; - - zwaveNodes.forEach(node => { - node.neighbors.forEach(neighborId => { - if (!alreadyIn[`${neighborId}-${node.id}`]) { - edgeData.push({ - from: node.id, - to: neighborId - }); - alreadyIn[`${node.id}-${neighborId}`] = true; - } - }); - }); - - // create an array with edges - let edges = new vis.DataSet(edgeData); - - // create a network - let container = document.getElementById('zwave-network-graph'); - - // provide the data in the vis format - let data = { - nodes, - edges - }; - let options = {}; - - // initialize your network! - return new vis.Network(container, data, options); -} - const actions = store => ({ async getNeighbors(state) { store.setState({ @@ -55,7 +14,6 @@ const actions = store => ({ zwaveNodesNeighbors, zwaveGetNeighborsStatus: RequestStatus.Success }); - renderGraph(zwaveNodesNeighbors); } catch (e) { const responseMessage = get(e, 'response.data.message'); if (responseMessage === ERROR_MESSAGES.SERVICE_NOT_CONFIGURED) {